/* ============================================================================ SOLPED · Estilos de Login App_Themes/bootstrap/css/signin.css ---------------------------------------------------------------------------- Construido SOBRE el sistema de diseño corporativo gruposokol-ui.css. Requisito: gruposokol-ui.css debe cargarse ANTES que este archivo (de él provienen los tokens --bg, --surface, --primary, --radius, etc.). Tema por defecto: coral (). ============================================================================ */ /* ─────────────────────────── Página ─────────────────────────── */ html, body { height: 100%; } body.text-center { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: radial-gradient(125% 90% at 50% 0%, var(--bg) 0%, var(--bg-soft) 100%); color: var(--text); } /* ─────────────────────────── Tarjeta ─────────────────────────── */ .form-signin { position: relative; width: 100%; max-width: 410px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; } /* franja de acento superior — la "firma" del sistema */ .form-signin::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--hero); } .form-signin .card-body { padding: 38px 34px 28px; text-align: center; } /* ─────────────────────────── Logo ─────────────────────────── */ .login-logo-wrapper { margin-bottom: 18px; } .login-logo { max-width: 150px; max-height: 72px; width: auto; height: auto; object-fit: contain; } /* ─────────────────────────── Título ─────────────────────────── */ .login-title-wrapper { margin-bottom: 26px; } .login-title { margin: 0; font-weight: var(--display-weight, 700); font-size: 1.45rem; letter-spacing: -.02em; line-height: 1.15; color: var(--text); } .login-subtitle { margin: 4px 0 0; font-size: .82rem; color: var(--muted); } /* ─────────────────────────── Campos ─────────────────────────── */ .login-field { text-align: left; margin-bottom: 16px; } .login-label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .login-label i, .login-label .oi { font-size: .95rem; line-height: 1; color: var(--primary); } /* inputs — sobreescriben Bootstrap .form-control / .form-select */ .form-signin .form-control, .form-signin .form-select { width: 100%; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px; font-family: inherit; font-size: .9rem; color: var(--text); box-shadow: none; transition: border-color .18s, box-shadow .18s; } .form-signin .form-control::placeholder { color: var(--faint); } .form-signin .form-control:focus, .form-signin .form-select:focus { border-color: var(--primary); box-shadow: var(--ring); outline: none; } .form-signin .form-control:disabled, .form-signin .form-select:disabled { background: var(--surface-2); color: var(--muted); } /* ─────────────────────────── Opciones ─────────────────────────── */ .login-options { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 20px; } .login-checkbox { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: .8rem; color: var(--text); cursor: pointer; } .login-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; } .login-forgot { font-size: .8rem; font-weight: 600; color: var(--primary-strong); text-decoration: none; } .login-forgot:hover { text-decoration: underline; } /* ─────────────────────────── Botón principal ─────────────────────────── */ .login-submit { margin-bottom: 22px; } /* Bootstrap 5.3 usa variables --bs-btn-*; las redefinimos con tokens coral */ .login-btn.btn { --bs-btn-bg: var(--primary-strong); --bs-btn-border-color: var(--primary-strong); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-active-bg: var(--primary-strong); --bs-btn-active-border-color: var(--primary-strong); --bs-btn-disabled-bg: var(--primary-strong); --bs-btn-disabled-border-color: var(--primary-strong); --bs-btn-color: var(--on-primary); --bs-btn-hover-color: var(--on-primary); --bs-btn-disabled-color: var(--on-primary); font-family: inherit; font-weight: 700; font-size: .95rem; letter-spacing: .01em; border-radius: var(--radius-sm); padding: 12px 18px; transition: filter .15s, transform .12s, opacity .15s; } .login-btn.btn:hover:not(:disabled) { filter: brightness(1.06); } .login-btn.btn:active:not(:disabled) { transform: translateY(1px); } .login-btn.btn:disabled { opacity: .5; cursor: not-allowed; } /* ─────────────────────────── Separador ─────────────────────────── */ .login-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--faint); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ─────────────────────────── Accesos rápidos ─────────────────────────── */ .login-quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; } .login-action-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s, color .15s, transform .12s; } .login-action-btn:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-strong); transform: translateY(-1px); } .login-action-btn i, .login-action-btn .oi { font-size: 1.25rem; line-height: 1; color: var(--primary); } .login-action-btn:hover i, .login-action-btn:hover .oi { color: var(--primary-strong); } .login-action-label { font-size: .68rem; font-weight: 600; letter-spacing: .01em; } /* ─────────────────────────── Footer ─────────────────────────── */ .login-footer { margin: 0; font-size: .68rem; color: var(--faint); } /* ============================================================================ Modal de información (Bootstrap 5) con estética gruposokol ============================================================================ */ #ModalInformacion .modal-content { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; } #ModalInformacion .modal-header { background: var(--hero); color: var(--on-hero); border-bottom: none; padding: 16px 20px; } #ModalInformacion .modal-title { display: flex; align-items: center; gap: 8px; font-family: inherit; font-weight: 700; font-size: 1rem; color: var(--on-hero); } #ModalInformacion .modal-body { padding: 20px; font-size: .9rem; line-height: 1.5; color: var(--text); text-align: left; } #ModalInformacion .modal-footer { border-top: 1px solid var(--border); padding: 14px 20px; } #ModalInformacion .modal-footer .btn { --bs-btn-bg: var(--primary-strong); --bs-btn-border-color: var(--primary-strong); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-color: var(--on-primary); --bs-btn-hover-color: var(--on-primary); font-family: inherit; font-weight: 700; border-radius: var(--radius-xs); } /* ============================================================================ RESPONSIVO ============================================================================ */ @media (max-width: 480px) { body.text-center { padding: 16px 12px; } .form-signin { max-width: 100%; border-radius: var(--radius-sm); } .form-signin .card-body { padding: 30px 22px 24px; } .login-title { font-size: 1.3rem; } } @media (max-width: 340px) { .login-quick-actions { grid-template-columns: 1fr; } .login-action-btn { flex-direction: row; justify-content: center; } } /* Respeta la preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { .login-action-btn, .login-btn.btn, .form-signin .form-control, .form-signin .form-select { transition: none; } }