/* O painel da marca e escuro nos DOIS temas: as cores dele levam html.tx no
   seletor para vencer as regras gerais de titulo/texto do techai_ui.css. */
/* Login no layout novo (UI v2). Mesmo formulario de sempre; so a apresentacao. */
html.tx body { display:block !important; min-height:100vh; margin:0; }
.txl { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); font-family:var(--tx-font); }
.txl-brand { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:48px 56px;
  background:linear-gradient(160deg,#06101C 0%,#023C4A 100%); color:#E6EEF0; }
.txl-brand::before { content:""; position:absolute; right:-140px; top:-160px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle,rgba(1,255,205,.18),transparent 62%); }
.txl-logo, html.tx .txl-logo { display:flex; align-items:center; gap:12px; font-size:28px; font-weight:600; letter-spacing:-.02em; margin-bottom:56px; color:#fff; }
.txl-logo img { height:35px; width:auto; display:block; }
.txl-eyebrow, html.tx .txl-eyebrow { color:#01FFCD !important; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin:0 0 12px; }
.txl-brand h2, html.tx .txl-brand h2 { color:#fff !important; font-size:clamp(30px,3.6vw,46px); line-height:1.08; letter-spacing:-.025em; margin:0 0 16px; font-weight:600; }
.txl-brand h2 em, html.tx .txl-brand h2 em { font-style:normal; color:#01FFCD !important; }
.txl-sub, html.tx .txl-sub { color:#B7CBD2 !important; font-size:16px; max-width:44ch; margin:0; }
.txl-card { display:flex; flex-direction:column; justify-content:center; padding:48px clamp(24px,6vw,96px); background:var(--tx-bg); }
.txl-card h1 { font-size:28px !important; margin:0 0 6px; }
.txl-muted { color:var(--tx-muted); margin:0 0 28px; }
.txl-card form { display:grid; gap:8px; max-width:400px; }
.txl-card label { font-size:13px; font-weight:600; color:var(--tx-fg-2); margin-top:8px; }
.txl-card .form-control { height:46px; padding:0 14px; font-size:15px; }
.txl-erro { min-height:20px; color:var(--tx-bad); font-size:13.5px; }
.txl-check { display:flex !important; align-items:center; gap:8px; font-weight:500 !important; color:var(--tx-muted) !important; margin:0 !important; }
.txl-btn { height:46px; margin-top:10px; border:0; border-radius:var(--tx-r); background:var(--tx-primary); color:var(--tx-on-primary); font-weight:600; font-size:15px; cursor:pointer; }
.txl-btn:hover { background:var(--tx-primary-hover); }
@media (max-width:860px) {
  .txl { grid-template-columns:1fr; }
  .txl-brand { padding:32px 24px; }
  .txl-logo { margin-bottom:24px; }
  .txl-brand h2, .txl-sub { display:none; }
}

/* Campo de senha com o botao de olho (mostrar/esconder) */
.txl-senha { position:relative; }
.txl-senha .form-control { padding-right:48px !important; width:100%; }
.txl-olho { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:grid; place-items:center;
  border:0; border-radius:8px; background:transparent; color:var(--tx-muted); cursor:pointer; }
.txl-olho:hover { color:var(--tx-fg); background:var(--tx-surface-3); }
.txl-olho:focus-visible { outline:2px solid var(--tx-accent); outline-offset:1px; }
.txl-olho .olho-fechado { display:none; }
.txl-olho[aria-pressed="true"] .olho-aberto { display:none; }
.txl-olho[aria-pressed="true"] .olho-fechado { display:block; }

/* Conta da empresa (Google) — abaixo do formulario de senha */
.txl-ou { display:flex; align-items:center; gap:12px; margin:18px 0 12px; max-width:400px; color:var(--tx-muted); font-size:13px; }
.txl-ou::before, .txl-ou::after { content:""; flex:1; height:1px; background:var(--tx-line); }
.txl-empresa { max-width:400px; height:46px; display:flex; align-items:center; justify-content:center; gap:10px; border-radius:var(--tx-r);
  border:1px solid var(--tx-line); background:var(--tx-surface-2); color:var(--tx-fg) !important; font-weight:600; font-size:15px;
  text-decoration:none !important; }
.txl-empresa:hover { background:var(--tx-surface-3); }
.txl-empresa:focus-visible { outline:2px solid var(--tx-accent); outline-offset:2px; }
.txl-empresa svg { width:18px; height:18px; flex:0 0 auto; }