/* =====================================================================
   LiteAuto · Self Service Password — tema clean
   ---------------------------------------------------------------------
   Apenas CSS. Não altera o HTML do LTB Self Service Password.
   Cole este arquivo carregando-o DEPOIS do bootstrap.min.css.

   Onde colocar (escolha uma opção):
   1) Salve como  htdocs/css/custom.css  e no conf/config.inc.local.php:
        $use_custom_css = true;
        $custom_css = "css/custom.css";
   2) OU cole o conteúdo abaixo no final de htdocs/css/styles.css

   Estrutura alvo (Bootstrap 5.3): .navbar .card .form-control
   .input-group .btn-primary  +  ids #login #oldpassword
   #newpassword #confirmpassword
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&display=swap');

:root{
  --la-blue:#2563eb;
  --la-blue-dark:#1d4ed8;
  --la-ink:#0f172a;
  --la-muted:#71717a;
  --la-line:#e4e4e7;
  --la-bg:#f3f4f6;
  --la-radius:14px;
}

/* ---------- base / fundo ---------- */
html,body{
  background:var(--la-bg) !important;
  /* textura pontilhada bem sutil */
  background-image:radial-gradient(circle at 1px 1px, rgba(15,23,42,.035) 1px, transparent 0) !important;
  background-size:22px 22px !important;
  color:var(--la-ink) !important;
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased;
}

/* ---------- navbar limpa (era escura por padrão) ---------- */
.navbar{
  background:#ffffff !important;
  border-bottom:1px solid var(--la-line);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  padding:.6rem 0;
  min-height:auto;
}
.navbar .container{display:flex;align-items:center}
.navbar-brand{
  display:flex !important;
  align-items:center;
  gap:11px;
  color:var(--la-ink) !important;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-.01em;
}
.navbar-brand img{
  height:30px;width:auto;
  /* logo fica nítido sobre fundo claro */
}
/* itens / dropdown de idioma */
.navbar .nav-link{color:var(--la-muted) !important;font-weight:500}
.navbar .nav-link:hover{color:var(--la-blue) !important}
.navbar-toggler{
  border:1px solid var(--la-line) !important;
  border-radius:9px;padding:.35rem .55rem;
}
.navbar-toggler:focus{box-shadow:0 0 0 3px rgba(37,99,235,.18) !important}
.navbar-dark .navbar-toggler-icon,
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2371717a' stroke-width='2.2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e") !important;
}
.dropdown-menu{
  border:1px solid var(--la-line);border-radius:12px;
  box-shadow:0 12px 32px -12px rgba(15,23,42,.18);
  padding:6px;
}
.dropdown-item{border-radius:8px;font-size:.92rem}
.dropdown-item:active{background:var(--la-blue)}

/* ---------- container centralizado verticalmente ---------- */
.container{max-width:520px}
/* dá respiro acima do card */
.navbar + .container,
body > .container{margin-top:42px;margin-bottom:42px}

/* ---------- card ---------- */
.card{
  border:1px solid #e6e7eb !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 18px 40px -18px rgba(15,23,42,.16) !important;
  overflow:hidden;
  background:#fff !important;
}
.card-header{
  background:#fff !important;
  border-bottom:1px solid #f1f2f4 !important;
  text-align:center;
  padding:26px 32px 10px !important;
}
.card-header img{height:34px;width:auto}
.card-body{padding:30px 38px 36px !important}
.card-title,
.card-body h1,.card-body h2,.card-body h3,.card-body h4{
  font-size:1.45rem !important;
  font-weight:600 !important;
  letter-spacing:-.02em;
  text-align:center;
  margin-bottom:6px !important;
  color:var(--la-ink);
}
/* subtítulo opcional, se houver parágrafo logo após o título */
.card-title + p,.card-body > p:first-of-type{
  text-align:center;color:var(--la-muted);font-size:.92rem;margin-bottom:26px;
}

/* ---------- labels ---------- */
label,.form-label,.col-form-label{
  font-size:.82rem !important;
  font-weight:500 !important;
  color:#3f3f46 !important;
  margin-bottom:6px !important;
}
/* espaçamento entre campos (BS5 .mb-3 e BS4 .form-group) */
.form-group,.mb-3{margin-bottom:18px !important}

/* ---------- inputs ---------- */
.form-control,.form-select{
  height:46px !important;
  padding:0 14px !important;
  font-size:.95rem !important;
  color:var(--la-ink) !important;
  background:#fafafa !important;
  border:1px solid var(--la-line) !important;
  border-radius:11px !important;
  box-shadow:none !important;
  transition:border-color .15s, box-shadow .15s, background .15s !important;
}
.form-control::placeholder{color:#a1a1aa !important}
.form-control:focus,.form-select:focus{
  background:#fff !important;
  border-color:var(--la-blue) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.13) !important;
  outline:none !important;
}

/* ---------- input-group (ícone + campo + olho) ---------- */
.input-group{border-radius:11px}
.input-group .form-control{
  border-radius:11px !important;
}
/* quando há addons, arredonda só nas pontas */
.input-group > :not(:first-child).form-control{
  border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;
  border-left:0 !important;
}
.input-group > .form-control:not(:last-child){
  border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;
}
.input-group-text,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text{
  background:#fafafa !important;
  border:1px solid var(--la-line) !important;
  color:#9ca3af !important;
  padding:0 12px !important;
  border-radius:11px !important;
}
.input-group > .input-group-text:first-child,
.input-group-prepend > .input-group-text{
  border-right:0 !important;
  border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;
}
.input-group > .input-group-text:last-child,
.input-group-append > .input-group-text{
  border-left:0 !important;
  border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;
}
/* ícone "olho" (mostrar/ocultar senha) clicável */
.toggle-password,[id*="toggle"]{cursor:pointer}
.input-group-text:hover{color:var(--la-blue) !important}

/* ---------- barra de força da senha ---------- */
.progress{
  height:5px !important;
  border-radius:3px !important;
  background:#ececef !important;
  margin-top:9px;
}
.progress-bar{border-radius:3px !important}
/* mapeia as cores de força do bootstrap para a paleta */
.progress-bar.bg-danger{background:#ef4444 !important}
.progress-bar.bg-warning{background:#f59e0b !important}
.progress-bar.bg-info,
.progress-bar.bg-primary{background:var(--la-blue) !important}
.progress-bar.bg-success{background:#16a34a !important}

/* ---------- botão principal ---------- */
.btn{
  border-radius:12px !important;
  font-weight:600 !important;
  font-size:.97rem !important;
  padding:.72rem 1.1rem !important;
  transition:filter .15s, box-shadow .15s, transform .05s !important;
}
.btn-primary,.btn-success{
  background:linear-gradient(180deg,var(--la-blue),var(--la-blue-dark)) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 6px 16px -6px rgba(37,99,235,.6) !important;
}
.btn-primary:hover,.btn-success:hover{
  filter:brightness(1.05);
  box-shadow:0 8px 20px -6px rgba(37,99,235,.7) !important;
}
.btn-primary:active,.btn-success:active{transform:translateY(1px)}
.btn-primary:focus,.btn-success:focus{
  box-shadow:0 0 0 3px rgba(37,99,235,.3) !important;
}
.btn-block,.btn.w-100,.d-grid .btn{width:100%}
/* botões secundários (links de voltar etc.) */
.btn-secondary,.btn-outline-secondary,.btn-default{
  background:#fff !important;border:1px solid var(--la-line) !important;
  color:#3f3f46 !important;box-shadow:none !important;
}
.btn-secondary:hover,.btn-outline-secondary:hover{background:#f8f8fa !important}

/* ---------- alertas / mensagens ---------- */
.alert{
  border-radius:12px !important;border:1px solid transparent;
  font-size:.9rem;padding:.8rem 1rem;
}
.alert-danger{background:#fef2f2 !important;border-color:#fecaca !important;color:#b91c1c !important}
.alert-success{background:#f0fdf4 !important;border-color:#bbf7d0 !important;color:#15803d !important}
.alert-warning{background:#fffbeb !important;border-color:#fde68a !important;color:#b45309 !important}
.alert-info{background:#eff6ff !important;border-color:#bfdbfe !important;color:#1d4ed8 !important}

/* ---------- requisitos de senha (lista de regras) ---------- */
.text-muted,small,.form-text{color:var(--la-muted) !important}
ul.fa-ul,.password-policy ul{list-style:none;padding-left:0}
.password-policy li,ul.fa-ul li{
  font-size:.82rem;color:#9ca3af;display:flex;align-items:center;gap:8px;margin-bottom:5px;
}

/* ---------- rodapé ---------- */
footer,.footer{
  text-align:center;color:#a1a1aa;font-size:.78rem;margin-top:18px;
}

/* =====================================================================
   CAMADA DE COMPATIBILIDADE — Bootstrap 3.4.1 / LTB 1.5
   ---------------------------------------------------------------------
   A marcação real desta versão usa .panel / .panel-body / .panel-heading
   e .input-group-addon (não .card / .input-group-text do BS5).
   As regras abaixo aplicam o MESMO visual clean a esses elementos.
   ===================================================================== */

/* ---- centralização: deixa a grade do BS3 (col-*-offset-*) trabalhar e
   apenas limita+centraliza o painel, sem estrangular o .container ---- */
body > .container{max-width:none !important}

/* ---- navbar (BS3: .navbar-default / .navbar-inverse) ---- */
.navbar-default,.navbar-inverse{
  background:#fff !important;
  border:none !important;
  border-bottom:1px solid var(--la-line) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  border-radius:0 !important;
  min-height:60px;
  margin-bottom:0;
}
.navbar-default .navbar-brand,
.navbar-inverse .navbar-brand{
  display:flex !important;align-items:center;gap:11px;height:auto;
  padding-top:14px;padding-bottom:14px;
  color:var(--la-ink) !important;font-weight:700;font-size:1.05rem;letter-spacing:-.01em;
}
.navbar-brand > img{display:inline-block;height:30px;width:auto}
.navbar-default .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a{color:var(--la-muted) !important;font-weight:500}
.navbar-default .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:hover{color:var(--la-blue) !important}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a{background:#f4f4f5 !important;color:var(--la-blue) !important}
/* botão hambúrguer (.navbar-toggle + .icon-bar) */
.navbar-default .navbar-toggle,
.navbar-inverse .navbar-toggle{
  border:1px solid var(--la-line) !important;border-radius:9px;margin-top:13px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{background:#f8f8fa !important}
.navbar-default .navbar-toggle .icon-bar,
.navbar-inverse .navbar-toggle .icon-bar{background:#71717a !important}

/* ---- panel = card central ---- */
.panel{
  border:1px solid #e6e7eb !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 18px 40px -18px rgba(15,23,42,.16) !important;
  background:#fff !important;
  overflow:hidden;
  max-width:460px;
  margin:42px auto !important;
}
.panel-default > .panel-heading{
  background:#fff !important;
  border-bottom:1px solid #f1f2f4 !important;
  text-align:center;
  padding:24px 32px 8px !important;
  border-radius:18px 18px 0 0 !important;
}
.panel-heading img{height:34px;width:auto}
.panel-title{
  font-size:1.45rem !important;font-weight:600 !important;letter-spacing:-.02em;
  text-align:center;color:var(--la-ink);line-height:1.3;
}
.panel-body{padding:30px 38px 36px !important}
.panel-footer{
  background:#fff !important;border-top:1px solid #f1f2f4 !important;
  text-align:center;color:var(--la-muted);font-size:.85rem;
}

/* ---- input-group-addon (ícone / olho do BS3) ---- */
.input-group-addon{
  background:#fafafa !important;
  border:1px solid var(--la-line) !important;
  color:#9ca3af !important;
  padding:0 12px !important;
  font-size:.95rem;
  border-radius:11px !important;
}
/* arredonda apenas as pontas externas (BS3 controla por :first/:last) */
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn{
  border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn{
  border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;
}
.input-group-addon:first-child{border-right:0 !important}
.input-group-addon:last-child{border-left:0 !important}
.input-group .form-control{
  border-radius:11px !important;
  /* corrige altura no BS3 */
  height:46px !important;
}
.input-group-addon:hover{color:var(--la-blue) !important;cursor:pointer}

/* ---- BS3 usa .help-block para dicas/erros ---- */
.help-block{color:var(--la-muted) !important;font-size:.82rem;margin-top:6px}
.has-error .form-control{border-color:#ef4444 !important;box-shadow:none !important}
.has-error .control-label,.has-error .help-block{color:#b91c1c !important}
.has-success .form-control{border-color:#16a34a !important}

/* ---- força de senha: BS3 .progress e/ou <meter>/<div id*=strength> ---- */
.progress{height:5px !important;border-radius:3px !important;background:#ececef !important;
  box-shadow:none !important;margin-top:9px;margin-bottom:0}
.progress-bar-danger{background:#ef4444 !important}
.progress-bar-warning{background:#f59e0b !important}
.progress-bar-info,.progress-bar-primary{background:var(--la-blue) !important}
.progress-bar-success{background:#16a34a !important}
meter{width:100%;height:5px;margin-top:9px}

/* ---- BS3 .btn-block já existe; reforça cantos/altura ---- */
.btn-block{width:100% !important}
.btn-lg{border-radius:12px !important;padding:.72rem 1.1rem !important;font-size:.97rem !important}

/* ---- labels do BS3 (.control-label) ---- */
.control-label{
  font-size:.82rem !important;font-weight:500 !important;color:#3f3f46 !important;
  margin-bottom:6px !important;display:block;text-align:left;
}

/* ---------------------------------------------------------------------
   LiteAuto: o LTB renderiza DOIS logos (navbar .menu-logo + corpo .logo).
   Esconde a navbar inteira (logo pequeno + dropdown de idioma) e mantém
   só o logo grande central no corpo.
   --------------------------------------------------------------------- */
.navbar-wrapper,
.navbar.navbar-default.navbar-static-top{ display:none !important; }
/* dá um respiro no topo já que a navbar saiu */
body > .container{ margin-top:32px !important; }