/* ============================================================================
   SISTERP — Login "Editorial Bold" (redesign 2026-06)
   Aplica-se ao template PHPRunner templates/_global_login.htm
   Identidade: logótipo paralelogramos + vermelho #CE1B28
   ============================================================================ */

:root{
  --sisterp-red:#CE1B28;
  --sisterp-red-dark:#a3141f;
  --sisterp-ink:#14151a;
  --sisterp-ink-soft:#1c1d24;
}

/* ---- Layout base: intro (esquerda) + formulário (direita) ---- */
body.function-login{ margin:0; background:#ececed; }

body.function-login .r-pretty-login-page{
  display:flex !important;
  flex-direction:row-reverse !important;   /* .r-sideimage (intro) fica à esquerda */
  min-height:100vh;
  font-family:-apple-system,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* anular overrides inline do template (.r-controls branco / .r-sideimage cinza) */
.r-pretty-login-page > .r-controls{ background:var(--sisterp-ink) !important; }
.r-pretty-login-page > .r-sideimage{ background:#ffffff !important; }

/* ===== Painel INTRO (esquerda, claro) ===== */
.r-sideimage{
  flex:1.1 1 0;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:64px 56px;
}
.r-sideimage .r-image{ width:100%; height:auto; }
/* aro decorativo */
.r-sideimage::after{
  content:"";
  position:absolute; left:-150px; bottom:-150px;
  width:360px; height:360px; border-radius:50%;
  border:64px solid rgba(206,27,40,.06);
  pointer-events:none;
}
.sisterp-intro{ position:relative; z-index:2; max-width:440px; }
.sisterp-intro .logo{ margin-bottom:48px; }
.sisterp-intro .logo img{ height:46px; width:auto; }
.sisterp-intro .kicker{
  font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sisterp-red); margin-bottom:14px;
}
.sisterp-intro h1{
  font-size:60px; line-height:.98; font-weight:800; letter-spacing:-.03em;
  color:var(--sisterp-ink); margin:0;
}
.sisterp-intro h1 em{ font-style:normal; color:var(--sisterp-red); }
.sisterp-intro .lead{
  margin-top:22px; font-size:16px; line-height:1.55; color:#5c606a; max-width:36ch;
}
.sisterp-intro .chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.sisterp-intro .chip{
  font-size:12.5px; font-weight:600; color:#3a3d44;
  background:#f3f3f5; border:1px solid #e6e6ea; border-radius:999px; padding:7px 14px;
}
.sisterp-intro .chip::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--sisterp-red); margin-right:8px; vertical-align:1px;
}

/* ===== Painel FORMULÁRIO (direita, escuro) ===== */
.r-controls{
  flex:.85 1 0;
  min-width:380px;
  display:flex; align-items:center; justify-content:center;
  padding:48px 44px;
}
.r-controls .r-mainform{ width:100%; max-width:360px; }

/* esconder o logótipo duplicado no topo do form (já está no painel intro) */
.r-controls [data-itemid="login-logo"]{ display:none !important; }

/* "Bem-vindo ao SISTERP" reaproveitado como título do formulário */
.r-controls [data-itemid="login_welcome"]{
  display:block; color:#fff; font-size:26px; font-weight:800; letter-spacing:-.01em;
  margin-bottom:6px;
}
.r-controls [data-itemid="login_welcome"]::after{
  content:"Introduza as suas credenciais de acesso.";
  display:block; font-size:14px; font-weight:400; color:rgba(255,255,255,.6);
  margin-top:8px; margin-bottom:8px; letter-spacing:0;
}

/* etiquetas */
.r-controls .r-edit-label,
.r-controls label.control-label{
  color:rgba(255,255,255,.66) !important; font-size:12.5px !important; font-weight:600 !important;
  margin:18px 0 8px !important; display:block;
}

/* inputs */
.r-controls .form-control{
  height:50px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:11px; color:#fff; font-size:15px; padding:0 14px; box-shadow:none; width:100%;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.r-controls .form-control::placeholder{ color:rgba(255,255,255,.4); }
.r-controls .form-control:focus{
  border-color:var(--sisterp-red); background:rgba(206,27,40,.10);
  box-shadow:0 0 0 4px rgba(206,27,40,.20); outline:none;
}

/* checkboxes */
.r-controls .checkbox label{ color:rgba(255,255,255,.7); font-size:13.5px; }
.r-controls .checkbox input{ accent-color:var(--sisterp-red); }

/* botão principal */
.r-controls .btn-primary{
  width:100% !important; height:52px; margin-top:8px; border:0 !important; border-radius:11px !important;
  background:var(--sisterp-red) !important; background-image:none !important; color:#fff !important;
  font-size:16px !important; font-weight:700; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -10px rgba(206,27,40,.7); transition:transform .15s, background .15s;
}
.r-controls .btn-primary:hover{ background:var(--sisterp-red-dark) !important; transform:translateY(-1px); color:#fff !important; }

/* links secundários (esqueci palavra-passe / convidado) */
.r-controls .btn-link{
  color:#ff8290 !important; font-weight:600; text-decoration:none !important; font-size:13px !important;
  background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
}
.r-controls .btn-link:hover{ color:#ff9aa6 !important; text-decoration:underline !important; }

/* tabelas do form sem bordas/spacing herdado */
.r-controls .r-form,
.r-controls .r-form td,
.r-controls .r-form tr{ background:transparent !important; border:0 !important; padding:0 !important; }
.r-controls .r-form td{ padding-top:2px !important; }

/* footer: botão full-width, link "esqueci" por baixo, alinhado à esquerda */
.r-controls table[data-location="footer"],
.r-controls table[data-location="footer"] tbody,
.r-controls table[data-location="footer"] tr,
.r-controls table[data-location="footer"] td{
  display:block !important; width:100% !important; text-align:left !important;
}
.r-controls table[data-location="footer"] td[data-cellId="footer_c2"]{ margin-top:14px; }

/* ===== Override de alta especificidade (vence a folha de tema carregada depois) ===== */
body.function-login .r-controls span[data-itemid="login_button"] a.btn,
body.function-login .r-controls span[data-itemid="continue_login_button"] a.btn,
body.function-login .r-controls span[data-itemid="verify_button"] a.btn{
  background:var(--sisterp-red) !important; background-image:none !important; border:0 !important;
  color:#fff !important; width:100% !important; height:52px !important; border-radius:11px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-weight:700 !important; font-size:16px !important; letter-spacing:.01em !important;
  box-shadow:0 12px 26px -10px rgba(206,27,40,.7) !important; text-shadow:none !important;
}
body.function-login .r-controls span[data-itemid="login_button"] a.btn:hover,
body.function-login .r-controls span[data-itemid="continue_login_button"] a.btn:hover{
  background:var(--sisterp-red-dark) !important; transform:translateY(-1px);
}
body.function-login .r-controls span[data-itemid="login_remind"] a.btn,
body.function-login .r-controls span[data-itemid="guest_login"] a.btn{
  background:transparent !important; background-image:none !important; border:0 !important;
  box-shadow:none !important; padding:0 !important; color:#ff8290 !important;
  font-weight:600 !important; font-size:13px !important; text-decoration:none !important; height:auto !important;
}
body.function-login .r-controls span[data-itemid="login_remind"] a.btn:hover{ color:#ff9aa6 !important; text-decoration:underline !important; }

/* mensagens de erro/sucesso */
.r-controls .alert{ border-radius:10px; font-size:13.5px; margin-bottom:12px; }
.r-controls .alert-danger{ background:rgba(206,27,40,.15); border:1px solid rgba(206,27,40,.4); color:#ffb3bb; }
.r-controls .alert-success{ background:rgba(61,220,132,.12); border:1px solid rgba(61,220,132,.35); color:#9af0c0; }

/* ===== Responsivo ===== */
@media (max-width:860px){
  .r-pretty-login-page{ flex-direction:column; }
  .r-sideimage{ flex:none; padding:40px 32px 8px; }
  .r-sideimage::after{ display:none; }
  .sisterp-intro .logo{ margin-bottom:24px; }
  .sisterp-intro h1{ font-size:40px; }
  .sisterp-intro .lead{ font-size:15px; }
  .sisterp-intro .chips{ margin-top:20px; }
  .r-controls{ flex:none; min-width:0; padding:24px 28px 48px; }
  .r-controls .r-mainform{ max-width:none; }
}