/* ============================================================
   Clube do Livro das Vendas — Estrategista CRM
   Tema de marca (sobrepõe o tema padrão do Calibre-Web)
   ============================================================ */

/* ---------- Fontes self-hosted (variáveis) ---------- */
@font-face {
  font-family: 'Sora';
  src: url('/static/brand/fonts/Sora.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/static/brand/fonts/DMSans.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:  #F8F5F1;
  --bg2: #FFFFFF;
  --sf:  #FFFFFF;
  --sf2: #F2EEE9;
  --bd:  #E2DDD6;
  --bd2: #CCC6BE;
  --p:   #1B3A4B;
  --p2:  #254D63;
  --am:  #E07B39;
  --am2: #F5924D;
  --am-soft:   rgba(224,123,57,.10);
  --am-border: rgba(224,123,57,.25);
  --tx:  #1A1A1A;
  --mu:  #6B7280;
  --mu2: #9CA3AF;
  --fd: 'Sora', system-ui, sans-serif;
  --fb: 'DM Sans', system-ui, sans-serif;
  --shadow: 0 1px 3px rgba(27,58,75,.06), 0 6px 18px rgba(27,58,75,.06);
  --radius: 12px;
}

/* ---------- Base ---------- */
html, body {
  background: var(--bg) !important;
  color: var(--tx) !important;
  font-family: var(--fb) !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .navbar-brand, .container-fluid .book .meta .title,
.panel-title, .discover h2, .cover .badge {
  font-family: var(--fd) !important;
  color: var(--p);
  letter-spacing: -.01em;
}
body h2 { color: var(--p) !important; }
a { color: var(--p2); }
a:hover, a:focus { color: var(--am); }
p, li, label, .text-muted, small { color: var(--tx); }
.text-muted, .container-fluid .book .meta .author { color: var(--mu) !important; }

/* ---------- Navbar (petróleo) ---------- */
.navbar-default {
  background: var(--p) !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(27,58,75,.18);
}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover {
  color: #fff !important;
  font-weight: 700;
  font-size: 20px;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-text,
.navbar-default .nav .dropdown-toggle { color: rgba(255,255,255,.82) !important; }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a { color: #fff !important; background: rgba(255,255,255,.10) !important; }
.navbar-default .navbar-nav > li > a .glyphicon { color: var(--am2); }
.navbar-default .navbar-toggle .icon-bar { background-color: #fff !important; }
.navbar-default .navbar-toggle { border-color: rgba(255,255,255,.4) !important; }
.navbar-default .form-control { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color:#fff; }
.navbar-default .form-control::placeholder { color: rgba(255,255,255,.6); }

/* ---------- Botões ---------- */
.btn-primary {
  background-color: var(--am) !important;
  border-color: var(--am) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 8px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-color: var(--am2) !important;
  border-color: var(--am2) !important;
}
.btn-default {
  background: var(--sf) !important;
  border: 1px solid var(--bd2) !important;
  color: var(--p) !important;
  font-weight: 600;
  border-radius: 8px;
}
.btn-default:hover, .btn-default:focus {
  background: var(--sf2) !important;
  border-color: var(--p2) !important;
  color: var(--p) !important;
}
.btn-default a { color: var(--p) !important; }

/* ---------- Cards de livro ---------- */
.container-fluid .book {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.container-fluid .book:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(27,58,75,.14);
  border-color: var(--am-border);
}
.container-fluid .book .cover img,
.container-fluid .single .cover img {
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(27,58,75,.18);
}
.container-fluid .book .meta .title { font-weight: 700; font-size: 15px; }
.cover .badge { background: var(--am) !important; color:#fff !important; }
.cover .read { color: var(--am); }

/* ---------- Login / cartões "well" ---------- */
.well {
  background: var(--sf) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 28px !important;
}
/* Página de login centralizada com faixa de topo âmbar */
body.blur .well, .col-sm-6.col-sm-offset-2.well {
  position: relative;
}
.form-control {
  border: 1px solid var(--bd2);
  border-radius: 8px;
  box-shadow: none;
  color: var(--tx);
}
.form-control:focus {
  border-color: var(--am);
  box-shadow: 0 0 0 3px var(--am-soft);
}
label { color: var(--p); font-weight: 600; }

/* ---------- Diversos ---------- */
.panel, .discover, .list-group-item { background: var(--sf); border-color: var(--bd); border-radius: 10px; }
.panel-default > .panel-heading { background: var(--sf2); border-color: var(--bd); color: var(--p); }
.pagination > li > a, .pagination > li > span { color: var(--p2); }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover { background: var(--p) !important; border-color: var(--p) !important; color:#fff !important; }
.alert-danger { background: #fdece7; border-color: var(--am-border); color: #8a3b12; }
hr { border-top-color: var(--bd); }
::selection { background: var(--am-soft); }

/* ============================================================
   TELA DE LOGIN — estilo SSO (painel de marca + formulário)
   ============================================================ */
body.login .navbar-default { display: none !important; }
body.login { background: var(--bg) !important; }
body.login .container-fluid,
body.login .row-fluid { margin: 0 !important; padding: 0 !important; max-width: none !important; }
body.login .col-sm-10 { width: 100% !important; float: none !important; padding: 0 !important; }

.cl-auth { display: flex; min-height: 100vh; width: 100%; }

/* -------- Painel de marca (esquerda) -------- */
.cl-auth__brand {
  flex: 0 0 46%;
  background: linear-gradient(150deg, #1B3A4B 0%, #254D63 100%);
  color: #fff; display: flex; align-items: center;
  padding: 56px; position: relative; overflow: hidden;
}
.cl-auth__brand::after {
  content: ""; position: absolute; right: -140px; bottom: -140px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224,123,57,.28), transparent 70%);
}
.cl-auth__brand::before {
  content: ""; position: absolute; left: -100px; top: -100px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
}
.cl-auth__brand-inner { position: relative; z-index: 1; max-width: 460px; }
.cl-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 44px; }
.cl-logo svg { width: 36px; height: 36px; flex: none; }
.cl-logo span { font-family: var(--fb); font-size: 18px; letter-spacing: .03em; color: rgba(255,255,255,.92); text-transform: uppercase; }
.cl-logo strong { color: var(--am2); font-weight: 700; }
.cl-auth__title {
  font-family: var(--fd); font-weight: 800; font-size: 46px; line-height: 1.06;
  color: #fff; margin: 0 0 22px; letter-spacing: -.025em;
}
.cl-auth__title em { color: var(--am2); font-style: normal; }
.cl-auth__tagline { font-family: var(--fb); font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0 0 36px; }
.cl-auth__features { list-style: none; padding: 0; margin: 0; }
.cl-auth__features li { font-family: var(--fb); font-size: 15px; color: rgba(255,255,255,.9); padding: 11px 0; border-top: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; gap: 11px; }
.cl-auth__features li:first-child { border-top: none; }
.cl-auth__features .dot { color: var(--am2); font-size: 18px; }

/* -------- Painel de formulário (direita) -------- */
.cl-auth__form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); }
.cl-card { width: 100%; max-width: 400px; }
.cl-card__title { font-family: var(--fd); font-weight: 700; font-size: 28px; color: var(--p); margin: 0 0 6px; }
.cl-card__sub { font-family: var(--fb); font-size: 15px; color: var(--mu); margin: 0 0 30px; }

.cl-form .cl-field { margin-bottom: 18px; }
.cl-form label { display: block; font-family: var(--fb); font-weight: 600; font-size: 13px; color: var(--p); margin-bottom: 7px; }
.cl-form input[type=text], .cl-form input[type=password] {
  width: 100%; height: 50px; padding: 0 16px;
  border: 1.5px solid var(--bd2); border-radius: 11px;
  background: #fff; color: var(--tx); font-size: 15px; font-family: var(--fb);
  transition: border-color .15s, box-shadow .15s;
}
.cl-form input[type=text]:focus, .cl-form input[type=password]:focus {
  outline: none; border-color: var(--am); box-shadow: 0 0 0 4px var(--am-soft);
}
.cl-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 24px; }
.cl-check { font-family: var(--fb); font-weight: 500; font-size: 14px; color: var(--mu); display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.cl-check input { width: 16px; height: 16px; accent-color: var(--am); }
.cl-link { background: none; border: none; color: var(--p2); font-family: var(--fb); font-size: 14px; font-weight: 600; cursor: pointer; padding: 0; }
.cl-link:hover { color: var(--am); text-decoration: underline; }
.cl-btn {
  width: 100%; height: 52px; border: none; border-radius: 11px;
  background: var(--am); color: #fff; font-family: var(--fd); font-weight: 700; font-size: 16px;
  cursor: pointer; box-shadow: 0 6px 18px rgba(224,123,57,.28);
  transition: background .15s, transform .05s, box-shadow .15s;
}
.cl-btn:hover { background: var(--am2); box-shadow: 0 8px 22px rgba(224,123,57,.36); }
.cl-btn:active { transform: translateY(1px); }
.cl-alert { background: #fdece7; border: 1px solid var(--am-border); color: #8a3b12; padding: 12px 14px; border-radius: 10px; font-family: var(--fb); font-size: 14px; margin-bottom: 20px; }
.cl-foot { text-align: center; font-family: var(--fb); font-size: 12.5px; color: var(--mu2); margin-top: 28px; }

/* mostrar/ocultar senha */
.cl-pass { position: relative; }
.cl-pass input { padding-right: 48px !important; }
.cl-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--mu2); cursor: pointer; border-radius: 8px; padding: 0;
}
.cl-eye:hover { color: var(--p); background: var(--sf2); }
.cl-eye.on { color: var(--am); }

/* "Não sou um robô" (checkbox estilo captcha) */
.cl-robot {
  display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none;
  background: var(--sf); border: 1.5px solid var(--bd2); border-radius: 11px;
  padding: 13px 16px; margin: 2px 0 20px; transition: border-color .15s, box-shadow .15s;
}
.cl-robot.checked { border-color: var(--am); box-shadow: 0 0 0 3px var(--am-soft); }
.cl-robot input { position: absolute; opacity: 0; width: 0; height: 0; }
.cl-robot__mark {
  width: 24px; height: 24px; border: 2px solid var(--bd2); border-radius: 6px; flex: none;
  background: #fff; position: relative; transition: .15s;
}
.cl-robot.checked .cl-robot__mark { background: var(--am); border-color: var(--am); }
.cl-robot.checked .cl-robot__mark::after {
  content: ""; position: absolute; left: 8px; top: 3px; width: 6px; height: 12px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.cl-robot__txt { font-family: var(--fb); font-size: 15px; font-weight: 600; color: var(--p); }

/* widget reCAPTCHA */
.cl-recaptcha { margin: 2px 0 20px; display: flex; justify-content: center; }

@media (max-width: 860px) {
  .cl-auth { flex-direction: column; }
  .cl-auth__brand { flex: none; padding: 40px 30px 34px; }
  .cl-auth__title { font-size: 32px; margin-bottom: 14px; }
  .cl-auth__tagline { margin-bottom: 4px; font-size: 15px; }
  .cl-auth__features { display: none; }
  .cl-logo { margin-bottom: 26px; }
  .cl-auth__form { padding: 34px 20px 44px; }
}