/* Super Webmail - tela de login (Agencia Super, 2026-10-19)
   Swiss Modernism 2.0 + identidade da marca. Vale so para body.task-login. */
body.task-login {
	--sw-ink: #0B0B0C; --sw-paper: #F5F5F2; --sw-white: #FFFFFF;
	--sw-blue: #1745A9; --sw-blue-soft: #A9BFF5;
	--sw-muted: #55595E; --sw-muted-dark: #B4B7BC;
	--sw-line: #DADBD6; --sw-line-dark: #26272A; --sw-radius: 10px;
	font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	background: var(--sw-paper); color: var(--sw-ink);
}
html.dark-mode body.task-login { background: var(--sw-paper); color: var(--sw-ink); }
/* o Elastic trava a rolagem (body/#layout com overflow:hidden e altura fixa); no login a pagina precisa rolar (celular) */
body.task-login { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body.task-login #layout { display: block; height: auto; min-height: 100vh; overflow: visible; }

/* grade das duas colunas (substitui o centralizado do Elastic) */
body.task-login #layout-content.sw-page {
	display: grid; grid-template-columns: minmax(360px, 5fr) 7fr;
	min-height: 100vh; width: 100%; text-align: left; background: none; border: 0;
}
body.task-login .sw-page a:focus-visible, body.task-login .sw-page button:focus-visible, body.task-login .sw-page input:focus-visible {
	outline: 3px solid var(--sw-blue); outline-offset: 2px;
}

/* ---- coluna do login ---- */
body.task-login .sw-login { background: var(--sw-white); display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(24px, 6vw, 88px); }
body.task-login .sw-login-inner { width: 100%; max-width: 360px; margin: 0 auto; }
body.task-login .sw-logo { display: block; width: 168px; height: auto; margin: 0 0 48px; }
body.task-login .sw-title { font-family: "Anton", sans-serif; font-weight: 400; font-size: 34px; line-height: 1.1; letter-spacing: .3px; text-transform: uppercase; color: var(--sw-ink); margin: 0; }
body.task-login .sw-sub { color: var(--sw-muted); margin: 8px 0 32px; font-size: 15px; }

body.task-login #login-form { position: static; top: auto; width: 100%; max-width: none; margin: 0; }
body.task-login #login-form table, body.task-login #login-form tbody, body.task-login #login-form tr { display: block; width: 100%; }
body.task-login #login-form .row { display: block; margin: 0 0 16px; }
body.task-login #login-form td.title { display: block !important; padding: 0; margin-bottom: 8px; }
body.task-login #login-form td.title label { font-size: 13px; font-weight: 600; color: var(--sw-ink); margin: 0; }
body.task-login #login-form td.input { display: block; width: 100%; padding: 0; }
body.task-login #login-form .input-group-prepend { display: none; }
body.task-login #login-form input.form-control {
	width: 100%; height: 48px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--sw-ink);
	background: var(--sw-paper); border: 1px solid var(--sw-line); border-radius: var(--sw-radius) !important; box-shadow: none;
	transition: border-color .2s, box-shadow .2s, background .2s;
}
body.task-login #login-form input.form-control::placeholder { color: #8A8D91; }
body.task-login #login-form input.form-control:hover { border-color: #BFC1BB; }
body.task-login #login-form input.form-control:focus { background: var(--sw-white); border-color: var(--sw-blue); box-shadow: 0 0 0 3px rgba(23,69,169,.18); outline: none; }
body.task-login #login-form .formbuttons { margin: 8px 0 0; }
body.task-login #login-form #rcmloginsubmit {
	width: 100%; height: 50px; font: inherit; font-weight: 700; font-size: 15px; letter-spacing: .6px; text-transform: uppercase;
	color: var(--sw-white); background: var(--sw-ink); border: 0; border-radius: var(--sw-radius); cursor: pointer; transition: background .2s;
}
body.task-login #login-form #rcmloginsubmit:hover, body.task-login #login-form #rcmloginsubmit:focus { background: var(--sw-blue); box-shadow: none; }
body.task-login #login-form #login-footer { display: none; }

body.task-login .sw-help { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; font-size: 14px; color: var(--sw-muted); }
body.task-login .sw-help a { color: var(--sw-blue); font-weight: 600; text-decoration: none; }
body.task-login .sw-help a:hover { text-decoration: underline; }

/* ---- coluna dos servicos ---- */
body.task-login .sw-showcase { background: var(--sw-ink); color: var(--sw-white); padding: 48px clamp(24px, 5vw, 80px); display: flex; flex-direction: column; justify-content: center; }
body.task-login .sw-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--sw-blue-soft); }
body.task-login .sw-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--sw-blue-soft); }
body.task-login .sw-h2 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 3vw, 42px); line-height: 1.08; color: var(--sw-white); margin: 12px 0; max-width: 22ch; }
body.task-login .sw-lead { color: var(--sw-muted-dark); max-width: 52ch; margin: 0 0 24px; font-size: 16px; line-height: 1.55; }
body.task-login .sw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
body.task-login .sw-card {
	display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; text-decoration: none; color: var(--sw-white);
	background: #141416; border: 1px solid var(--sw-line-dark); border-radius: var(--sw-radius); cursor: pointer; transition: border-color .2s, background .2s;
}
body.task-login .sw-card:hover { border-color: var(--sw-blue-soft); background: #18191C; color: var(--sw-white); text-decoration: none; }
body.task-login .sw-card svg { width: 26px; height: 26px; stroke: var(--sw-blue-soft); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
body.task-login .sw-card-t { font-size: 16px; font-weight: 700; line-height: 1.3; }
body.task-login .sw-card-p { font-size: 14px; color: var(--sw-muted-dark); line-height: 1.5; }
body.task-login .sw-more { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 600; color: var(--sw-blue-soft); }
body.task-login .sw-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 24px; }
body.task-login .sw-btn-light { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; font-weight: 700; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; text-decoration: none; color: var(--sw-ink); background: var(--sw-white); border-radius: var(--sw-radius); transition: background .2s; }
body.task-login .sw-btn-light:hover { background: var(--sw-blue-soft); color: var(--sw-ink); text-decoration: none; }
body.task-login .sw-link { color: var(--sw-muted-dark); font-size: 14px; text-decoration: none; border-bottom: 1px solid #3A3B3F; }
body.task-login .sw-link:hover { color: var(--sw-white); border-color: var(--sw-white); text-decoration: none; }
body.task-login .sw-credit { margin: 24px 0 0; font-size: 12px; color: #8E9196; }
body.task-login .sw-credit a { color: var(--sw-muted-dark); text-decoration: none; }
body.task-login .sw-credit a:hover { color: var(--sw-white); }

@media (max-width: 1100px) { body.task-login .sw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
	body.task-login #layout-content.sw-page { grid-template-columns: 1fr; }
	body.task-login .sw-login { padding: 48px 24px; }
	body.task-login .sw-logo { margin-bottom: 32px; }
	body.task-login .sw-showcase { padding: 48px 24px; }
}
@media (max-width: 520px) { body.task-login .sw-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { body.task-login * { transition: none !important; } }