/* OCTEK - tela de login (UX) */
:root{
  --oc-primaria:#1A1035; --oc-secundaria:#4B0082; --oc-destaque:#7B3FC4; --oc-suave:#2A1D4A;
  --oc-laranja:#F5A623; --oc-texto:#1f1a2e; --oc-mudo:#6b6580; --oc-borda:#ddd6ea; --oc-fundo:#f6f4fb;
}
*{ box-sizing:border-box; }
html, body.oc-body{ margin:0; padding:0; min-height:100vh; font-family:"Segoe UI", Roboto, Arial, sans-serif; color:var(--oc-texto); background:var(--oc-fundo); }
.oc-page{ display:flex; min-height:100vh; }

/* Painel da marca */
.oc-brand-panel{
  flex:0 0 44%; max-width:560px; color:#fff; padding:40px 48px; display:flex; flex-direction:column; gap:32px;
  background:radial-gradient(circle at 20% 15%, var(--oc-secundaria) 0%, var(--oc-primaria) 58%, #0d0820 100%);
  border-right:4px solid var(--oc-laranja); position:relative; overflow:hidden;
}
.oc-brand-panel:after{ content:""; position:absolute; right:-120px; bottom:-120px; width:320px; height:320px; border-radius:50%; background:rgba(123,63,196,.18); }
.oc-brand-top{ display:flex; align-items:center; gap:16px; }
.oc-logo-img{ width:84px; height:84px; object-fit:contain; }
.oc-brand-name{ font-size:14px; letter-spacing:4px; text-transform:uppercase; opacity:.85; }
.oc-brand-body{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.oc-brand-title{ font-size:30px; line-height:1.25; margin:0 0 24px; font-weight:700; max-width:420px; }
.oc-beneficios{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.oc-beneficios li{ display:flex; align-items:center; gap:12px; font-size:15px; opacity:.95; }
.oc-beneficios svg{ width:22px; height:22px; flex:0 0 22px; padding:3px; border-radius:50%; background:rgba(245,166,35,.18); fill:var(--oc-laranja); }
.oc-suporte{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:10px; position:relative; z-index:1; }
.oc-suporte-titulo{ font-size:13px; text-transform:uppercase; letter-spacing:2px; opacity:.75; }
.oc-suporte-item{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-size:15px; }
.oc-suporte-item svg{ width:20px; height:20px; flex:0 0 20px; fill:#fff; }
.oc-suporte-item:hover span{ text-decoration:underline; }
.oc-brand-rodape{ font-size:12px; opacity:.6; position:relative; z-index:1; }

/* Painel do formulario */
.oc-form-panel{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 20px; }
.oc-card{ width:100%; max-width:400px; background:#fff; border-radius:18px; padding:36px 32px 26px; box-shadow:0 18px 48px rgba(26,16,53,.12); }
.oc-card-head{ margin-bottom:18px; }
.oc-logo-mobile{ display:none; width:64px; height:64px; object-fit:contain; margin:0 auto 10px; background:var(--oc-primaria); border-radius:16px; padding:6px; }
.oc-saudacao{ font-size:24px; margin:0 0 6px; color:var(--oc-primaria); }
.oc-sub{ margin:0; font-size:14px; color:var(--oc-mudo); line-height:1.5; }

.oc-label{ display:block; font-size:13px; font-weight:600; margin:14px 0 6px; }
.oc-field{ position:relative; }
.oc-ico{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; pointer-events:none; }
.oc-ico svg{ width:18px; height:18px; fill:#9a93ad; }
input.oc-input{
  width:100% !important; height:46px; padding:0 44px 0 40px !important; border:1px solid var(--oc-borda); border-radius:10px;
  font-size:15px; color:var(--oc-texto); background:#faf9fd; transition:border-color .15s, box-shadow .15s, background .15s;
}
input.oc-input:focus{ outline:none; border-color:var(--oc-destaque); box-shadow:0 0 0 3px rgba(123,63,196,.18); background:#fff; }
.oc-field:focus-within .oc-ico svg{ fill:var(--oc-destaque); }
.oc-olho{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; background:transparent; cursor:pointer; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.oc-olho svg{ width:20px; height:20px; fill:#9a93ad; }
.oc-olho:hover svg, .oc-olho.ativo svg{ fill:var(--oc-destaque); }
.oc-caps{ display:none; margin-top:6px; font-size:12px; color:#9a5b00; background:#fff6e5; border:1px solid #ffe0a6; border-radius:8px; padding:5px 10px; }
.oc-caps.on{ display:block; }

.oc-linha{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap; }
.oc-lembrar{ font-size:13px; }
.oc-lembrar input[type=checkbox]{ accent-color:var(--oc-destaque); margin-right:6px; vertical-align:middle; }
.oc-lembrar label, .oc-lembrar span{ cursor:pointer; vertical-align:middle; }
.oc-esqueci{ font-size:13px; color:var(--oc-destaque); text-decoration:none; font-weight:600; margin-left:auto; }
.oc-esqueci:hover{ text-decoration:underline; }

.oc-btn{
  width:100%; height:48px; margin-top:20px; border:0; border-radius:10px; cursor:pointer; font-size:15px; font-weight:700; letter-spacing:.5px; color:#fff;
  background:linear-gradient(90deg, var(--oc-secundaria), var(--oc-destaque)); display:flex; align-items:center; justify-content:center; gap:10px;
  transition:filter .15s, transform .05s, opacity .15s;
}
.oc-btn:hover{ filter:brightness(1.08); }
.oc-btn:active{ transform:translateY(1px); }
.oc-btn .oc-spin{ display:none; width:18px; height:18px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:oc-gira .8s linear infinite; }
.oc-btn.carregando{ opacity:.85; pointer-events:none; }
.oc-btn.carregando .oc-spin{ display:inline-block; }
@keyframes oc-gira{ to{ transform:rotate(360deg); } }

.oc-alerta{ display:none; border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:6px; line-height:1.4; }
.oc-alerta-erro{ background:#fdecee; color:#a3182b; border:1px solid #f5c2c9; }
.oc-alerta-ok{ background:#edf8f0; color:#1d6b38; border:1px solid #bfe5cb; }

.oc-ajuda{ text-align:center; font-size:13px; color:var(--oc-mudo); margin-top:18px; }
.oc-ajuda a{ color:var(--oc-destaque); font-weight:600; text-decoration:none; }
.oc-ajuda a:hover{ text-decoration:underline; }
.oc-seguranca{ display:flex; align-items:center; gap:8px; justify-content:center; margin-top:16px; padding-top:14px; border-top:1px solid #eee9f5; font-size:12px; color:#8a83a0; }
.oc-seguranca svg{ width:14px; height:14px; flex:0 0 14px; fill:#b3abc6; }
.oc-rodape-mobile{ display:none; font-size:12px; color:#8a83a0; margin-top:18px; }

/* Celular / tablet */
@media (max-width: 860px){
  .oc-page{ flex-direction:column; }
  .oc-brand-panel{ display:none; }
  .oc-form-panel{ padding:24px 16px; background:linear-gradient(180deg, var(--oc-primaria) 0, var(--oc-secundaria) 200px, var(--oc-fundo) 200px); }
  .oc-logo-mobile{ display:block; }
  .oc-card-head{ text-align:center; }
  .oc-card{ padding:28px 22px 22px; }
  .oc-rodape-mobile{ display:block; }
}