/* Login público das empresas. Independente do shell autenticado do iHome. */
:root {
    color-scheme: light;
    --ih27-brand: #2563eb;
    --login-button-text: #ffffff;
    --login-link: #2563eb;
    --primary-color: var(--login-link);
    --success-color: #15803d;
    --error-color: #b42318;
    --text-color: #172b42;
    --text-light: #596c80;
    --bg-color: #f8fafc;
    --border-color: #ccd8e3;
}
* { box-sizing: border-box; }
body.tenant-login {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    background: #eef3f8;
    background: radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--ih27-brand) 10%, transparent), transparent 60%), #f1f5f9;
    color: var(--text-color);
    font: 14px/1.5 'Segoe UI', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.tenant-login::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: linear-gradient(#64748b09 1px, transparent 1px), linear-gradient(90deg, #64748b09 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: linear-gradient(transparent, #0007);
    pointer-events: none;
}
a { color: var(--primary-color); text-underline-offset: 4px; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 5px; }
svg { width: 22px; height: 22px; flex-shrink: 0; }
.login-page { position: relative; max-width: 1184px; min-height: 100svh; margin: auto; padding: 38px 32px 26px; display: flex; flex-direction: column; justify-content: center; }
.page-header, .page-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.page-header { padding: 0 2px 30px; }
.ihome-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 27px; font-weight: 650; letter-spacing: -1px; }
.ihome-brand img { display: block; width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.brand-dot { color: var(--primary-color); }
.header-caption { color: #5d7185; font-size: 12px; }
.login-shell { display: grid; grid-template-columns: 1fr 1.07fr; overflow: hidden; border: 1px solid #d7e1eb; border-radius: 20px; box-shadow: 0 24px 70px #203c5a12; }
.access-panel { padding: 48px 56px 34px; background: #ffffff; min-width: 0; }
.company-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 38px; }
.company-logo-slot { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; flex-shrink: 0; width: 128px; height: 64px; overflow: hidden; border: 1px dashed #c3d2e0; border-radius: 12px; background: #f8fafc; color: var(--login-link); }
.company-logo-slot svg { width: 27px; height: 27px; }
.company-logo-slot img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
.company-logo-slot [hidden] { display: none; }
.company-logo-slot.has-company-logo { width: 144px; height: 96px; border-color: transparent; background: #ffffff; }
.eyebrow { color: #637990; font-size: 9px; font-weight: 600; letter-spacing: 1.6px; }
.company-brand > div:last-child { min-width: 0; }
.company-name { margin: 3px 0 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.welcome-copy h1 { margin: 0 0 12px; font-size: 40px; font-weight: 500; letter-spacing: -1.6px; line-height: 1.15; }
.welcome-copy > p { margin: 0 0 31px; color: var(--text-light); font-size: 14px; }
.return-profile { display: flex; align-items: center; gap: 14px; margin: -6px 0 25px; padding: 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-color); }
.return-avatar { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--ih27-brand) 10%, #ffffff); color: var(--login-link); }
.return-avatar img { width: 100%; height: 100%; object-fit: cover; }
.return-avatar [hidden] { display: none; }
.return-profile-copy { min-width: 0; }
.return-profile-copy p { margin: 2px 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.return-profile-copy a { font-size: 11px; }
.return-profile-username { display: block; color: var(--text-light); font-size: 11px; overflow-wrap: anywhere; }
.form_login fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.form_login legend { padding: 0; margin-bottom: 16px; font-size: 22px; font-weight: 500; }
.input-group { margin-bottom: 21px; }
.input-group label { display: block; margin: 0 0 9px; color: #283f58; font-size: 12px; font-weight: 500; }
.input-group label > span { color: #637990; }
.password-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; }
.password-group .password-field { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.password-recovery { grid-column: 2; grid-row: 1; font-size: 11px; text-decoration: none; }
.password-recovery:hover { text-decoration: underline; }
.form_login input[type='text'], .form_login input[type='password'] { width: 100%; min-height: 49px; border: 1px solid var(--border-color); border-radius: 7px; padding: 13px 15px; background: var(--bg-color); color: var(--text-color); outline: none; transition: border-color .15s, box-shadow .15s; }
.form_login input[readonly] { color: var(--text-light); background: #eef2f6; }
.form_login input::placeholder { color: #6d7f91; }
.form_login input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--login-link) 14%, transparent); }
.form_login input[aria-invalid='true'] { border-color: #b42318; }
.password-field { position: relative; }
.password-field input { padding-right: 51px !important; }
.password-field button { position: absolute; top: 3px; bottom: 3px; right: 3px; width: 43px; border: 0; border-radius: 5px; background: transparent; color: #596f83; display: grid; place-items: center; }
.password-field button:hover, .password-field button[aria-pressed='true'] { color: var(--login-link); background: #eaf0f6; }
.password-field svg { width: 19px; height: 19px; }
.btn-login, #passo_chave input[type='submit'] { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 49px; margin-top: 27px; padding: 13px 17px; border: 1px solid var(--ih27-brand); border-radius: 7px; background: var(--ih27-brand); color: var(--login-button-text); font-size: 13px; font-weight: 650; transition: background .15s; }
.btn-login:hover, #passo_chave input[type='submit']:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ih27-brand) 18%, transparent); }
.btn-login:disabled, #passo_chave input[type='submit']:disabled { opacity: .65; cursor: wait; }
.btn-login svg { width: 18px; height: 18px; }
.access-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 31px; color: #607488; font-size: 10px; }
.access-note svg { width: 13px; height: 13px; }
#status { margin-top: 16px; font-size: 12px; overflow-wrap: anywhere; }
#status:empty { display: none; }
#status > div { padding: 11px 13px; border: 1px solid #d4dfe9; border-radius: 6px; line-height: 1.5; }
.token-help { color: var(--text-light); }
.captcha-area { margin-top: 8px; }
.turnstile-config-warning { color: #8a5300; font-size: 12px; }
#passo_chave img { max-width: 100%; float: none !important; margin: 10px auto !important; }
#passo_chave #img_google { display: block; }
#passo_chave label { display: block; width: auto !important; margin-bottom: 8px; }
.story-panel { position: relative; overflow: hidden; min-width: 0; background: #f0f5fa; background: linear-gradient(145deg, color-mix(in srgb, var(--ih27-brand) 10%, #fff), color-mix(in srgb, var(--ih27-brand) 4%, #fff)); border-top: 4px solid var(--ih27-brand); padding: 38px 43px 25px; }
.story-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 34px; }
.platform-label { display: flex; align-items: center; gap: 7px; color: #3f5870; font-size: 8px; font-weight: 600; letter-spacing: 1.5px; }
.platform-label > span { width: 5px; height: 5px; background: var(--login-link); border-radius: 50%; }
.edition { color: #637c93; font-size: 11px; }
.story-panel h2 { position: relative; margin: 0 0 15px; font-size: 40px; line-height: 1.18; letter-spacing: -1.6px; font-weight: 450; }
.story-panel h2 em { font-style: normal; color: var(--login-link); }
.story-description { position: relative; margin: 0; color: #50677d; font-size: 13px; line-height: 1.7; }
.management-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; height: 190px; margin: 12px 0 10px; }
.management-module { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 14px; border: 1px solid #cbd9e5; border-radius: 10px; background: #ffffff; }
.management-module > svg { width: 24px; height: 24px; color: var(--login-link); }
.management-module > div { min-width: 0; }
.management-module strong { display: block; color: #243e56; font-size: 12px; font-weight: 600; }
.management-module span { display: block; margin-top: 3px; color: #536c82; font-size: 10px; line-height: 1.4; }
.benefits { position: relative; padding: 3px 0 23px; display: grid; gap: 19px; }
.benefit { display: flex; align-items: center; gap: 13px; }
.benefit-icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #c7d5e3; border-radius: 9px; background: #ffffff; color: var(--login-link); }
.benefit-icon svg { width: 18px; height: 18px; }
.benefit h3 { margin: 0 0 3px; font-size: 12px; font-weight: 500; color: #243e56; }
.benefit p { margin: 0; font-size: 10px; color: #536c82; }
.story-footer { border-bottom: 3px solid var(--ih27-brand); padding-bottom: 14px; display: flex; align-items: center; gap: 14px; padding-top: 17px; border-top: 1px solid #cbd9e5; color: #526d83; font-size: 9px; }
.story-footer svg { width: 17px; height: 17px; }
.footer-line { flex: 1; }
.page-footer { padding: 22px 2px 0; color: #5b7187; font-size: 9px; }
@media (min-width: 1500px) { .login-page { max-width: 1248px; } .access-panel { padding: 52px 64px 42px; } .story-panel { padding: 44px 48px 30px; } .management-overview { height: 204px; } }
@media (max-width: 900px) { .access-panel { padding: 35px 30px 30px; } .story-panel { padding: 32px 28px 24px; } .story-panel h2 { font-size: 34px; } .platform-label { font-size: 7px; letter-spacing: 1px; } .benefit h3 { font-size: 11px; } }
@media (max-width: 680px) {
    .login-page { padding: 24px 20px; max-width: 480px; }
    .page-header { padding-bottom: 22px; }
    .ihome-brand { font-size: 24px; }
    .header-caption { max-width: 145px; text-align: right; font-size: 10px; }
    .login-shell { grid-template-columns: 1fr; border-radius: 15px; }
    .access-panel { padding: 32px 27px; }
    .company-brand { margin-bottom: 32px; gap: 10px; }
    .company-logo-slot { width: 106px; height: 58px; }
    .company-logo-slot.has-company-logo { width: 120px; height: 80px; }
    .company-name { font-size: 14px; }
    .welcome-copy h1 { font-size: 36px; }
    .story-panel { padding: 24px 27px; }
    .story-topline { margin-bottom: 18px; }
    .story-panel h2 { font-size: 29px; letter-spacing: -.9px; }
    .story-description { font-size: 12px; }
    .management-overview { height: auto; margin: 18px 0; }
    .management-module { padding: 12px 10px; gap: 8px; }
    .management-module > svg { width: 20px; height: 20px; }
    .benefits { gap: 17px; padding-bottom: 20px; }
    .page-footer { flex-direction: column; align-items: center; gap: 6px; font-size: 9px; text-align: center; }
}
body.tenant-login--return, .tenant-login--return .login-page { min-height: 100dvh; }
@media (max-height: 900px) {
    .tenant-login--return .login-page { padding: 16px 24px; }
    .tenant-login--return .page-header { padding-bottom: 16px; }
    .tenant-login--return .access-panel { padding: 24px 38px; }
    .tenant-login--return .company-brand { margin-bottom: 20px; }
    .tenant-login--return .company-logo-slot { height: 52px; }
    .tenant-login--return .company-logo-slot.has-company-logo { height: 80px; }
    .tenant-login--return .welcome-copy h1 { font-size: 34px; margin-bottom: 8px; }
    .tenant-login--return .welcome-copy > p { margin-bottom: 18px; }
    .tenant-login--return .return-profile { padding: 10px; margin: 0 0 18px; }
    .tenant-login--return .return-profile .eyebrow { display: none; }
    .tenant-login--return .input-group { margin-bottom: 16px; }
    .tenant-login--return .btn-login { margin-top: 20px; }
    .tenant-login--return .access-note { margin-top: 18px; }
    .tenant-login--return .page-footer { padding-top: 12px; }
    .tenant-login--return .story-panel { padding: 26px 32px 22px; }
    .tenant-login--return .story-topline { margin-bottom: 24px; }
    .tenant-login--return .story-panel h2 { font-size: 34px; }
    .tenant-login--return .management-overview { height: 150px; gap: 8px; }
    .tenant-login--return .management-module { padding: 10px; gap: 8px; }
    .tenant-login--return .benefits { gap: 14px; padding-bottom: 16px; }
}
@media (max-width: 680px) {
    .tenant-login--return .login-page { padding: 16px 20px; }
    .tenant-login--return .story-panel { display: none; }
    .tenant-login--return .access-panel { padding: 24px 27px; }
    .tenant-login--return .welcome-copy h1 { font-size: 32px; }
}
@media (max-height: 680px) {
    .tenant-login--return .login-page { padding-top: 8px; padding-bottom: 8px; }
    .tenant-login--return .page-header { padding-bottom: 10px; }
    .tenant-login--return .ihome-brand { font-size: 22px; }
    .tenant-login--return .access-panel { padding: 16px 24px; }
    .tenant-login--return .company-brand { margin-bottom: 8px; }
    .tenant-login--return .company-logo-slot { height: 44px; }
    .tenant-login--return .company-logo-slot.has-company-logo { height: 64px; }
    .tenant-login--return .welcome-copy h1 { font-size: 28px; margin-bottom: 6px; }
    .tenant-login--return .welcome-copy > p { margin-bottom: 10px; font-size: 12px; }
    .tenant-login--return .return-profile { padding: 8px; margin-bottom: 10px; }
    .tenant-login--return .return-avatar { width: 44px; height: 44px; }
    .tenant-login--return .input-group { margin-bottom: 12px; }
    .tenant-login--return .input-group label { margin-bottom: 6px; }
    .tenant-login--return .form_login input { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
    .tenant-login--return .btn-login { min-height: 44px; margin-top: 16px; padding-top: 10px; padding-bottom: 10px; }
    .tenant-login--return .access-note { display: none; }
    .tenant-login--return .management-overview { display: none; }
    .tenant-login--return .ihome-brand img { width: 32px; height: 32px; }
    .tenant-login--return .page-footer { padding-top: 8px; }
}
@media (max-height: 520px) {
    .tenant-login--return .login-page { max-width: 560px; }
    .tenant-login--return .login-shell { grid-template-columns: 1fr; }
    .tenant-login--return .page-header, .tenant-login--return .story-panel, .tenant-login--return .welcome-copy { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Imagens ocupam o painel sem alterar a altura do formulário. */
.story-panel.story-panel--banners { padding: 0; border-top: 0; }
.story-fallback[hidden], .login-carousel [hidden], .login-carousel[hidden] { display: none; }
.login-carousel { position: absolute; inset: 0; touch-action: pan-y pinch-zoom; }
.login-carousel-slides, .login-carousel-slide { position: absolute; inset: 0; }
.login-carousel-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.login-carousel-controls { position: absolute; inset: 0; }
.login-carousel-controls button { padding: 0; border: 0; background: transparent; }
.login-carousel-controls button:focus-visible { outline: 2px solid #ffffff; outline-offset: -5px; box-shadow: inset 0 0 0 6px #172b4270; }
.login-carousel-zone { position: absolute; top: 0; bottom: 0; width: 50%; }
.login-carousel-zone--previous { left: 0; }
.login-carousel-zone--next { right: 0; }
.login-carousel-dots { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; display: flex; justify-content: center; flex-wrap: wrap; pointer-events: none; }
.login-carousel-dots button { width: 28px; height: 44px; border-radius: 8px; pointer-events: auto; }
.login-carousel-dots span { display: block; width: 8px; height: 8px; margin: auto; border: 1px solid #172b4280; border-radius: 50%; background: #ffffffa6; box-shadow: 0 1px 5px #0008; }
.login-carousel-dots [aria-current="true"] span { background: #ffffff; transform: scale(1.35); }
@media (max-width: 680px) { .story-panel--banners { aspect-ratio: 6 / 7; } }

/* Recuperação e redefinição usam a mesma identidade do login da empresa. */
.recovery-form[hidden] { display: none; }
.recovery-field-help { margin: 8px 0 0; color: var(--text-light); font-size: 11px; line-height: 1.6; }
.recovery-back { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 23px; font-size: 12px; text-decoration: none; }
.recovery-back:hover, .recovery-new-link:hover { text-decoration: underline; }
.recovery-new-link { display: block; margin-top: 16px; font-size: 11px; text-align: center; }
.recovery-request-link { text-decoration: none; }
.recovery-notice { padding: 14px 16px; border: 1px solid #f1cd8e; border-radius: 7px; background: #fffbeb; color: #804800; font-size: 12px; }
.recovery-notice p { margin: 6px 0 0; }
#status .recovery-status--error { color: var(--error-color); border-color: #f1c9c5; background: #fff6f5; }
#status .recovery-status--success { color: #166534; border-color: #bbdfc5; background: #f0fdf4; }
#status .recovery-status--loading { color: var(--text-light); background: var(--bg-color); }