/* 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 { --login-page-chrome: 170px; position: relative; width: 100%; max-width: 1184px; height: 100vh; height: 100svh; min-height: 0; 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; flex-shrink: 0; align-self: center; width: min(100%, calc((100svh - var(--login-page-chrome) - 2px) * 12 / 7 + 2px)); }
.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; }
.v2br-logo-link { display: inline-flex; flex-shrink: 0; border-radius: 8px; }
.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; }
/* O quadro usa duas colunas iguais; cada painel lateral tem proporcao 6:7. */
.login-stage { width: 100%; min-width: 0; min-height: 0; aspect-ratio: 12 / 7; max-height: calc(100svh - var(--login-page-chrome)); flex-shrink: 0; display: grid; place-items: center; container-type: size; }
.login-shell { --login-panel-height: min(calc(100cqh - 2px), calc((100cqw - 2px) * 7 / 12)); display: grid; width: calc(var(--login-panel-height) * 12 / 7 + 2px); height: calc(var(--login-panel-height) + 2px); min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); 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; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior-y: contain; }
.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-y: auto; min-width: 0; min-height: 0; overscroll-behavior-y: contain; 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-panel:focus-visible { outline: 2px solid var(--login-link); outline-offset: -3px; }
.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: 16px 20px; max-width: 480px; }
    .page-header { padding-bottom: 0; }
    .ihome-brand { font-size: 24px; }
    .header-caption { max-width: 145px; text-align: right; font-size: 10px; }
    .login-shell { width: 100%; height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) clamp(96px, 20svh, 176px); 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; }
}
/* A mesma geometria atende login, retorno, recuperacao e autenticador. */
@media (max-height: 900px) {
    .login-page { --login-page-chrome: 114px; padding: 16px 24px; }
    .page-header { padding-bottom: 16px; }
    .page-footer { padding-top: 12px; }
    .access-panel { padding: 24px 38px; }
    .company-brand { margin-bottom: 20px; }
    .company-logo-slot { height: 52px; }
    .company-logo-slot.has-company-logo { height: 80px; }
    .welcome-copy h1 { font-size: 34px; margin-bottom: 8px; }
    .welcome-copy > p { margin-bottom: 18px; }
    .return-profile { padding: 10px; margin: 0 0 18px; }
    .return-profile .eyebrow { display: none; }
    .input-group { margin-bottom: 16px; }
    .btn-login { margin-top: 20px; }
    .access-note { margin-top: 18px; }
    .story-panel { padding: 26px 32px 22px; }
    .story-topline { margin-bottom: 24px; }
    .story-panel h2 { font-size: 34px; }
    .management-overview { height: 150px; gap: 8px; }
    .management-module { padding: 10px; gap: 8px; }
    .benefits { gap: 14px; padding-bottom: 16px; }
}
@media (max-width: 680px) {
    .login-page { --login-page-chrome: 129px; padding: 16px 20px; }
    .page-header, .page-footer { width: 100%; }
    .page-header { padding-bottom: 12px; }
    .page-footer { padding-top: 12px; }
    .login-stage { aspect-ratio: auto; height: calc(100svh - var(--login-page-chrome)); }
    .access-panel { padding: 24px 22px; }
    .welcome-copy h1 { font-size: 32px; }
    .form_login input { font-size: 16px; }
    .story-panel { padding: 20px 24px; }
    .story-panel h2 { font-size: 26px; }
    .story-topline { margin-bottom: 14px; }
}
@media (max-height: 680px) {
    .login-page { --login-page-chrome: 81px; padding: 8px 16px; }
    .page-header { padding-bottom: 10px; }
    .page-footer { padding-top: 8px; }
    .ihome-brand { font-size: 22px; }
    .access-panel { padding: 12px; }
    .company-brand { margin-bottom: 6px; }
    .company-logo-slot { width: 96px; height: 48px; }
    .company-logo-slot.has-company-logo { width: 104px; height: 56px; }
    .welcome-copy h1 { font-size: 24px; margin-bottom: 6px; }
    .welcome-copy > p { display: none; }
    .return-profile { padding: 6px; margin-bottom: 8px; }
    .return-avatar { width: 40px; height: 40px; }
    .input-group { margin-bottom: 12px; }
    .input-group label { margin-bottom: 6px; }
    .form_login input { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
    .btn-login { min-height: 44px; margin-top: 16px; padding-top: 10px; padding-bottom: 10px; }
    .access-note { display: none; }
    .management-overview { height: auto; }
    .ihome-brand img { width: 32px; height: 32px; }
}
@media (max-width: 680px) and (max-height: 680px) {
    .login-page { --login-page-chrome: 100px; }
}
@media (max-height: 520px) {
    .welcome-copy, .header-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* O banner preenche o quadro estavel, com recorte central e sem deformacao. */
.story-panel.story-panel--banners { padding: 0; border-top: 0; overflow: hidden; }
.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; }
/* Setas aparecem por hover/foco; em telas de toque permanecem discretamente visíveis. */
.login-carousel-zone::before, .login-carousel-zone::after { content: ''; position: absolute; top: 50%; pointer-events: none; opacity: 0; transition: opacity .15s; }
.login-carousel-zone::before { width: 32px; height: 32px; border: 1px solid #ffffff50; border-radius: 50%; background: #172b4259; transform: translateY(-50%); transition: opacity .15s, background .15s; }
.login-carousel-zone::after { width: 8px; height: 8px; border: solid #fff; border-width: 0 1.5px 1.5px 0; }
.login-carousel-zone--previous::before { left: 12px; }
.login-carousel-zone--next::before { right: 12px; }
.login-carousel-zone--previous::after { left: 25px; transform: translateY(-50%) rotate(135deg); }
.login-carousel-zone--next::after { right: 25px; transform: translateY(-50%) rotate(-45deg); }
.login-carousel-zone:hover::before, .login-carousel-zone:focus-visible::before { background: #172b428c; }
.login-carousel:hover .login-carousel-zone::before, .login-carousel:hover .login-carousel-zone::after,
.login-carousel:focus-within .login-carousel-zone::before, .login-carousel:focus-within .login-carousel-zone::after { opacity: 1; }
@media (hover: none), (pointer: coarse) {
    .login-carousel-zone::before, .login-carousel-zone::after { opacity: 1; }
}


.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); }

.login-auth-back { display: block; margin: 15px auto 0; padding: 8px; border: 0; background: transparent; color: var(--login-link); font: inherit; font-size: 12px; text-decoration: underline; }
.login-authenticator-qr { width: min(100%, 220px); margin: 12px auto; }
.login-authenticator-qr svg { display: block; width: 100%; height: auto; }
.login-carousel-controls .login-carousel-toggle { position: absolute; z-index: 2; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; background: #172b42cc; color: #fff; font-size: 18px; opacity: 0; }
.login-carousel:hover .login-carousel-toggle, .login-carousel:focus-within .login-carousel-toggle, .login-carousel-toggle[aria-pressed="true"] { opacity: 1; }
@media (hover: none) { .login-carousel-controls .login-carousel-toggle { opacity: 1; } }

/* 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); }

/* No celular, o banner vertical fica inteiro abaixo do formulário, com rolagem da página. */
@media (max-width: 680px) {
    .login-page { height: auto; min-height: 100svh; justify-content: flex-start; }
    .login-stage { display: block; height: auto; max-height: none; container-type: normal; }
    .login-shell { height: auto; grid-template-rows: 560px auto; }
    .access-panel { overscroll-behavior-y: auto; }
    .story-panel.story-panel--banners { width: 100%; aspect-ratio: 6 / 7; }
}
@media (max-width: 680px) and (max-height: 680px) {
    .login-shell { grid-template-rows: 440px auto; }
}

/* Ajusta o conteúdo à altura real do cartão, preservando espaço para as mensagens. */
@media (min-width: 681px) {
    .access-panel { display: flex; flex-direction: column; }
    .access-panel > * { flex-shrink: 0; }
    .access-panel > .company-brand { margin-top: auto; }
    .access-panel > .access-note { margin-bottom: auto; }
    @container (min-height: 520px) and (max-height: 740px) {
        .access-panel { padding: 24px 38px; }
        .company-brand { margin-bottom: 16px; }
        .company-logo-slot.has-company-logo { height: 80px; }
        .welcome-copy h1 { font-size: 34px; margin-bottom: 8px; }
        .welcome-copy > p { margin-bottom: 14px; }
        .return-profile { padding: 10px; margin: 0 0 14px; }
        .return-profile .eyebrow { display: none; }
        .input-group { margin-bottom: 14px; }
        .btn-login { margin-top: 20px; }
        .access-note { margin-top: 14px; }
        #status { margin-top: 10px; }
        #status > div { padding: 8px 12px; }
    }
}
@media (max-width: 680px) and (min-height: 681px) {
    .access-panel { padding: 16px 22px; }
    .company-brand { margin-bottom: 12px; }
    .welcome-copy h1 { font-size: 30px; margin-bottom: 6px; }
    .welcome-copy > p { margin-bottom: 10px; }
    .return-profile { padding: 8px; margin-bottom: 12px; }
    .input-group { margin-bottom: 12px; }
    .btn-login { margin-top: 16px; }
    .access-note { margin-top: 12px; }
    #status { margin-top: 8px; }
    #status > div { padding: 8px 12px; }
}
@media (max-width: 680px) and (max-height: 680px) {
    .input-group { margin-bottom: 8px; }
    .btn-login { margin-top: 12px; }
    #status { margin-top: 8px; }
    #status > div { padding: 8px 12px; }
}