/* ============================================================
   Login OficinaFlex / MultWeb (login-6)  — tema escuro (modelo)
   Fundo navy + carro escurecido a esquerda; marketing direto no
   navy; formulario num card branco flutuante a direita.
   Bootstrap 3 compativel. Escopo em .oflex-login.
   ============================================================ */

.oflex-login { margin: 0; font-family: 'Open Sans', Helvetica, Arial, sans-serif; color: #e8eef7; background: #0a1326; }

.oflex-wrap {
    display: flex; min-height: 100vh;
    background:
        linear-gradient(260deg, rgba(8, 15, 33, .90) 0%, rgba(8, 15, 33, .94) 48%, #0a1530 62%, #0a1530 100%),
        url('../img/login/hero-oficina.jpg') right center / cover no-repeat,
        #0a1326;
}

/* ---------- Painel de marca (esquerda) ---------- */
.oflex-brand { flex: 1 1 56%; position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; order: 1; }
.oflex-brand__inner { width: 100%; padding: 20px 50px; }

.oflex-brand__logo img { height: 38px; display: block; filter: brightness(0) invert(1); }

.oflex-brand__title { font-size: 25px; line-height: 1.3; font-weight: 700; margin: 20px 0 4px; color: #fff; max-width: 560px; }
.oflex-brand__title strong { color: #36b6f0; }

.oflex-features { list-style: none; padding: 0; margin: 28px 0 0; display: flex; }
.oflex-features li { width: 20%; padding: 0 8px; text-align: center; }
.oflex-features li i { display: block; font-size: 24px; color: #36b6f0; margin-bottom: 10px; }
.oflex-features li span { display: block; font-size: 12px; line-height: 1.4; color: #dbe6f6; }

.oflex-trust { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 28px auto 0; width: fit-content; max-width: 100%; background: rgba(54, 182, 240, .12); border: 1px solid rgba(54, 182, 240, .35); border-radius: 30px; padding: 10px 22px; font-size: 13px; color: #e3eefc; }
.oflex-trust i { color: #36b6f0; font-size: 15px; }
.oflex-trust b { color: #fff; }

.oflex-products { display: flex; align-items: stretch; margin-top: 26px; }
.oflex-prod { flex: 1; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: border-color .15s, background .15s; }
.oflex-prod:hover { border-color: rgba(54, 182, 240, .55); background: rgba(255, 255, 255, .09); }
.oflex-prod__body { flex: 1; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.oflex-prod__logo { height: 26px; margin-bottom: 12px; filter: brightness(0) invert(1); }
.oflex-prod__desc { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: #bccbe2; line-height: 1.4; }
.oflex-prod__bar { padding: 8px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #fff; text-align: center; }
.oflex-prod__bar i { margin-right: 5px; }
.oflex-prod__bar--blue { background: #1769c4; }
.oflex-prod__bar--red { background: #e2384e; }
.oflex-prod__plus { align-self: center; color: #6f8fc4; font-size: 22px; font-weight: 300; margin: 0 12px; }

.oflex-mw { display: flex; align-items: center; margin-bottom: 10px; }
.oflex-mw__icon { height: 24px; margin-right: 8px; }
.oflex-mw__wm { font-weight: 800; font-size: 18px; letter-spacing: 1px; color: #fff; }
.oflex-mw__wm span { color: #e2384e; }

.oflex-modules { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .10); }
.oflex-modules span { display: flex; flex-direction: column; align-items: center; flex: 1; font-size: 11px; color: #d3e0f1; }
.oflex-modules span i { font-size: 17px; color: #36b6f0; margin-bottom: 7px; }
.oflex-segments { text-align: center; color: #8aa6cf; font-size: 11px; letter-spacing: 2px; margin-top: 12px; }

.oflex-cloud { display: flex; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .10); }
.oflex-cloud__brand { display: flex; flex-direction: column; padding-right: 16px; margin-right: 6px; border-right: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; }
.oflex-cloud__name { display: flex; align-items: center; font-weight: 800; color: #fff; font-size: 14px; letter-spacing: 1px; }
.oflex-cloud__name .oflex-mw__wm { font-size: 14px; margin: 0 4px; }
.oflex-cloud__brand i { color: #36b6f0; margin-right: 6px; }
.oflex-cloud__brand small { color: #aebfd6; font-size: 10px; letter-spacing: .5px; margin-top: 2px; }
.oflex-cloud__items { display: flex; flex: 1; }
.oflex-cloud__items div { flex: 1; display: flex; flex-direction: column; padding-left: 14px; }
.oflex-cloud__items i { color: #36b6f0; font-size: 14px; margin-bottom: 3px; }
.oflex-cloud__items b { color: #fff; font-size: 11.5px; }
.oflex-cloud__items span { color: #b3c4dd; font-size: 10.5px; line-height: 1.3; }

.oflex-brand__foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .10); text-align: center; }
.oflex-brand__foot img { height: 30px; opacity: .9; }

/* ---------- Painel do formulario (direita) ---------- */
.oflex-panel { flex: 1 1 44%; position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 28px 24px; min-width: 0; }

.oflex-topbar { align-self: flex-start; display: flex; align-items: center; gap: 10px; z-index: 3; }
.oflex-chip { display: inline-flex; align-items: center; font-size: 12px; color: #cdd9ec; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15); border-radius: 20px; padding: 6px 13px; text-decoration: none; }
.oflex-chip:hover { text-decoration: none; color: #fff; }
.oflex-chip i { margin-right: 6px; color: #36b6f0; }
.oflex-chip--status { color: #d7ead9; }
.oflex-dot { width: 8px; height: 8px; border-radius: 50%; background: #27d17f; margin-right: 7px; box-shadow: 0 0 0 3px rgba(39, 209, 127, .2); }

.oflex-card { width: 100%; max-width: 396px; margin-top: auto; background: #fff; border-radius: 16px; padding: 26px 30px; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); color: #2b3a4b; }
.oflex-card__logo { display: block; max-width: 230px; max-height: 70px; margin: 0 auto 18px; }
.oflex-card h2 { font-size: 22px; font-weight: 700; color: #1f2d3d; text-align: center; margin: 0 0 4px; }
.oflex-card__sub { font-size: 13.5px; color: #8795a7; text-align: center; margin: 0 0 22px; }

.oflex-card .form-group { margin-bottom: 14px; }
.oflex-card label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: #6b7a8d; margin-bottom: 5px; }
.oflex-card .form-control { height: 44px; border-radius: 9px; border: 1px solid #d7dfe9; box-shadow: none; font-size: 14px; color: #2b3a4b; }
.oflex-card .form-control:focus { border-color: #1769c4; box-shadow: 0 0 0 3px rgba(23, 105, 196, .12); }
.oflex-card .input-group { width: 100%; }
.oflex-card .input-group .form-control { border-radius: 0; }
.oflex-flash { border-radius: 9px; animation: oflexflash 1.3s ease; }
@keyframes oflexflash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(23, 105, 196, 0); }
    25%, 65% { box-shadow: 0 0 0 4px rgba(23, 105, 196, .32); }
}

.oflex-ico { background: #fff; border: 1px solid #d7dfe9; border-right: 0; color: #9aa7b6; width: 42px; border-radius: 9px 0 0 9px; }
.oflex-btn-search { background: #1769c4; color: #fff; border: 1px solid #1769c4; cursor: pointer; min-width: 46px; border-radius: 0 9px 9px 0; }
.oflex-btn-search:hover { background: #13579f; color: #fff; }
.oflex-btn-search.disabled { opacity: .7; cursor: default; }
#showpassword { background: #fff; border: 1px solid #d7dfe9; border-left: 0; color: #1769c4; cursor: pointer; width: 46px; border-radius: 0 9px 9px 0; }

.oflex-selectwrap { position: relative; }
.oflex-selicon { position: absolute; left: 13px; top: 0; height: 44px; line-height: 44px; color: #9aa7b6; z-index: 2; pointer-events: none; }
.oflex-card .oflex-selectwrap select.form-control { padding-left: 34px; }
.oflex-card .oflex-selectwrap .select2-selection__rendered { padding-left: 34px !important; }

.oflex-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 16px; }
.oflex-check { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #6b7a8d; margin: 0; display: flex; align-items: center; cursor: pointer; }
.oflex-check input { margin: 0 7px 0 0; }

.oflex-btn-primary { background: linear-gradient(135deg, #1769c4, #1452a6); color: #fff; border: 0; height: 46px; border-radius: 9px; font-weight: 700; letter-spacing: .5px; font-size: 14px; width: 100%; box-shadow: 0 8px 18px rgba(23, 105, 196, .32); }
.oflex-btn-primary:hover, .oflex-btn-primary:focus { color: #fff; background: linear-gradient(135deg, #13579f, #0f4287); }
.oflex-btn-primary[disabled] { opacity: .75; }
.oflex-btn-primary i { margin-right: 8px; }

.oflex-info { display: flex; align-items: flex-start; background: #f1f7fd; border: 1px solid #d8e7f6; border-radius: 10px; padding: 12px 14px; margin-top: 16px; font-size: 12.5px; color: #3f5872; line-height: 1.45; }
.oflex-info i { color: #1769c4; font-size: 18px; margin: 2px 10px 0 0; }

.oflex-green { background: #27a361; color: #fff; border: 0; height: 44px; border-radius: 9px; font-weight: 700; width: 100%; }
.oflex-green:hover, .oflex-green:focus { background: #218a52; color: #fff; }

.oflex-forgot { text-align: center; margin-top: 16px; }
.oflex-card a { color: #1769c4; font-size: 13px; text-decoration: none; }
.oflex-card a:hover { text-decoration: underline; }
.oflex-card .alert { border-radius: 9px; font-size: 13px; margin: 4px 0 12px; }

.oflex-secure { text-align: center; font-size: 12px; color: #9fb1cb; max-width: 396px; margin-top: 14px; margin-bottom: auto; }
.oflex-secure i { color: #27d17f; margin-right: 5px; }
.oflex-secure b { color: #dce7f5; }

/* ---------- Redefinicao de senha ---------- */
#redefinir-senha .redefinir-senha-title { font-size: 20px; font-weight: 700; color: #1f2d3d; text-align: center; margin: 0 0 6px; }
#tela-redefinir-senha-exigencias div { font-size: 12px; margin: 2px 0; }
.text-danger { color: #d9534f; }
.text-success { color: #27a361; }

/* ---------- Select2 ---------- */
.oflex-card .select2-container { width: 100% !important; }
.oflex-card .select2-container--default .select2-selection--single { height: 44px; border-radius: 9px; border: 1px solid #d7dfe9; }
.oflex-card .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-left: 12px; color: #2b3a4b; }
.oflex-card .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }

/* dropdown do select2 e anexado ao body (fora do .oflex-card), entao herda
   a cor clara do tema escuro; forcamos texto escuro p/ legibilidade */
.select2-dropdown { border-color: #d7dfe9; }
.select2-container--default .select2-results__option { color: #2b3a4b; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #1769c4; color: #fff; }
.select2-search--dropdown .select2-search__field { color: #2b3a4b; }

/* ---------- Responsivo ---------- */
@media (max-width: 1199px) {
    .oflex-wrap { min-height: 100vh; flex-direction: column; }
    .oflex-brand { display: none; }
    .oflex-panel { flex: 1 1 100%; padding: 20px 16px 30px; }
    .oflex-topbar { align-self: center; }
}
@media (max-width: 480px) {
    .oflex-card { padding: 22px 18px; }
}