/* ============================================================ kepa-auth.css Tema verde/blanco/naranja Kepa para la sección de autenticación. Se carga DESPUÉS de main.css y sobre . Sobrescribe la paleta nativa de PowerAdmin con la marca Kepa: panel de marca verde oscuro, superficies claras y acento naranja. ============================================================ */ [data-theme=dark] { --background-color: #f8faf9; --surface-color: #ffffff; --card-bg: #ffffff; --accent-color: #2d6a4f; --heading-color: #0d2218; --default-color: #1a202c; --muted-color: #6b8c7a; --border-color: #d4e6db; --border-color-dark: #c3d9cc; --input-bg: #ffffff; --input-border: #d4e6db; --input-focus-border: #2d6a4f; --input-focus-ring: rgba(45, 106, 79, 0.25); } /* Panel de marca: verde oscuro con destello naranja */ [data-theme=dark] .auth-brand { background: linear-gradient(160deg, #1b4332 0%, #2d6a4f 100%); border-right: 1px solid #1b4332; } [data-theme=dark] .auth-brand::before { background: radial-gradient(circle at 20% 80%, rgba(82, 183, 136, 0.18) 0%, transparent 55%), radial-gradient(circle at 80% 15%, rgba(82, 183, 136, 0.10) 0%, transparent 50%); } /* Botón primario naranja con texto oscuro para máximo contraste */ [data-theme=dark] .btn-primary { --bs-btn-bg: #2d6a4f; --bs-btn-border-color: #2d6a4f; --bs-btn-hover-bg: #1b4332; --bs-btn-hover-border-color: #1b4332; --bs-btn-active-bg: #14532d; --bs-btn-active-border-color: #14532d; --bs-btn-color: #ffffff; --bs-btn-hover-color: #ffffff; --bs-btn-active-color: #ffffff; --bs-btn-disabled-bg: #2d6a4f; --bs-btn-disabled-border-color: #2d6a4f; --bs-btn-disabled-color: #ffffff; font-weight: 600; } /* Inputs: superficie oscura, texto claro */ [data-theme=dark] .form-control, [data-theme=dark] .auth-form .form-control { background-color: var(--input-bg); border-color: var(--input-border); color: var(--default-color); } [data-theme=dark] .form-control::placeholder, [data-theme=dark] .auth-form .form-control::placeholder { color: #6b6b73; } [data-theme=dark] .form-control:focus, [data-theme=dark] .auth-form .form-control:focus { border-color: var(--accent-color); box-shadow: 0 0 0 0.25rem var(--input-focus-ring); background-color: var(--input-bg); color: var(--default-color); } /* Botón dentro de input-group (mostrar/ocultar contraseña) */ [data-theme=dark] .auth-form .input-group .btn, [data-theme=dark] .input-group .btn-outline-secondary { background: var(--input-bg); border-color: var(--input-border); color: var(--muted-color); } [data-theme=dark] .auth-form .input-group .btn:hover { color: var(--accent-color); border-color: var(--accent-color); } /* Botones outline (social, secundarios) en oscuro */ [data-theme=dark] .btn-outline-secondary { --bs-btn-color: var(--default-color); --bs-btn-border-color: var(--border-color); --bs-btn-bg: transparent; --bs-btn-hover-bg: var(--surface-color); --bs-btn-hover-border-color: var(--accent-color); --bs-btn-hover-color: var(--default-color); } /* Etiquetas y checkbox legibles sobre negro */ [data-theme=dark] .auth-form .form-label { color: var(--default-color); } [data-theme=dark] .auth-form .form-check-input:checked { background-color: var(--accent-color); border-color: var(--accent-color); } /* ---------- Componentes reutilizables Kepa ---------- */ /* Alertas */ .kepa-alert { padding: 0.85rem 1rem; border-radius: 0.5rem; margin-bottom: 1.25rem; font-size: 0.8125rem; display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.5; } .kepa-alert i { margin-top: 2px; flex-shrink: 0; } .kepa-alert--error { background: rgba(229, 62, 62, 0.08); border: 1px solid rgba(229, 62, 62, 0.25); color: #b91c1c; } .kepa-alert--success { background: rgba(10, 124, 62, 0.08); border: 1px solid rgba(10, 124, 62, 0.25); color: #0a7c3e; } .kepa-alert--info { background: rgba(8, 145, 178, 0.10); border: 1px solid rgba(8, 145, 178, 0.30); color: #0e7490; } /* Link de registro destacado (naranja, pill) */ .kepa-register-link { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 44px; font-size: 0.8125rem; font-weight: 600; border: 2px solid var(--accent-color); border-radius: 999px; background: transparent; color: var(--accent-color); text-decoration: none; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s; } .kepa-register-link:hover { background: rgba(45, 106, 79, 0.12); color: #2d6a4f; transform: translateY(-1px); } .kepa-register-link i { color: var(--accent-color); } /* Botón "código por correo" (magic) */ .kepa-magic-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 44px; font-size: 0.8125rem; font-weight: 500; border: 1px solid var(--border-color); border-radius: 0.5rem; background: transparent; color: var(--default-color); text-decoration: none; transition: all 0.2s; } .kepa-magic-btn:hover { border-color: var(--accent-color); background: rgba(45, 106, 79, 0.08); color: var(--default-color); } .kepa-magic-btn i { color: var(--accent-color); } /* Tarjeta seleccionable (elegir rol en registro) */ .auth-role-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--border-color); border-radius: 0.75rem; background: var(--surface-color); text-decoration: none; color: var(--default-color); transition: all 0.2s; margin-bottom: 1rem; } .auth-role-card:hover { border-color: var(--accent-color); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27, 67, 50, 0.12); } .auth-role-card .auth-role-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 0.6rem; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent-color), transparent 85%); color: var(--accent-color); font-size: 1.25rem; } .auth-role-card h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.15rem; color: var(--heading-color); } .auth-role-card p { font-size: 0.8125rem; margin: 0; color: var(--muted-color); } /* Input de código de verificación */ .kepa-code-input { text-align: center; font-size: 1.75rem; font-weight: 600; letter-spacing: 0.5rem; } /* Encabezado de sección (formularios largos, p. ej. proveedor) */ .kepa-section-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--heading-color); margin: 1.75rem 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border-color); } .kepa-section-title i { color: var(--accent-color); } /* Logo del panel de marca: blanco; fallback de texto si no carga */ [data-theme=dark] .auth-brand-logo span { color: #fff; } /* Wordmark "MMC by MauleConecta" */ .auth-brand-logo .brand-wordmark { display: inline-flex; flex-direction: column; line-height: 1; } .auth-brand-logo .brand-wordmark strong { font-size: 1.3rem; font-weight: 800; letter-spacing: .5px; color: #fff; } .auth-brand-logo .brand-wordmark small { font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #95d5b2; margin-top: 3px; } /* ============================================================ Transición entre páginas (View Transitions API, cross-document). Crossfade suave al navegar entre login / registro / corporativo, etc. Soportado en Chromium (Brave, Chrome, Edge). Degrada sin efecto en otros. ============================================================ */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }