/* ------------------------------------------------------------------
   Query Contas — telas de login, senha e conta.
   Mesma linguagem do login do CRM (auth-card-layout + primitivas
   shadcn): cartão branco centralizado, logo completa acima, título e
   descrição centralizados, erro embaixo do campo. Tokens do
   query-design.css; nada de cor fora dele.
   ------------------------------------------------------------------ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.contas { min-height: 100vh; background: var(--muted); color: var(--foreground); font-family: var(--font-sans); font-size: var(--text-sm); }
button, input { font-family: inherit; }

.contas-page { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px; }
.contas-coluna { width: 100%; max-width: 448px; display: flex; flex-direction: column; gap: 24px; }
.contas-logo { align-self: center; display: flex; }
.contas-logo img { height: 36px; width: auto; display: block; }

.contas-card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.contas-card-head { padding: 32px 40px 0; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.contas-etapa { font-size: 12px; font-weight: 500; color: var(--muted-foreground); margin: 0 0 2px; }
.contas-titulo { font-size: var(--text-xl); font-weight: 600; line-height: 1.25; margin: 0; letter-spacing: -0.01em; }
.contas-descricao { font-size: var(--text-sm); color: var(--muted-foreground); margin: 0; line-height: 1.5; }
.contas-descricao strong { color: var(--foreground); font-weight: 500; }
.contas-card-body { padding: 32px 40px; display: flex; flex-direction: column; gap: 24px; }
.contas-form { display: flex; flex-direction: column; gap: 24px; margin: 0; }

.contas-rodape a { white-space: nowrap; }
.c-btns-coluna { display: flex; flex-direction: column; gap: 12px; }
.c-btns-coluna .c-btn { margin-top: 0; }
.contas-rodape { text-align: center; font-size: var(--text-sm); color: var(--muted-foreground); margin: 0; line-height: 1.5; }

/* ---------------- campos ---------------- */
.c-field { display: flex; flex-direction: column; gap: 8px; }
.c-field-head { display: flex; align-items: center; }
.c-field-head .c-link { margin-left: auto; }
.c-label { font-size: var(--text-sm); font-weight: 500; line-height: 1; }
.c-input {
    height: 36px; width: 100%; padding: 4px 12px;
    background: transparent; color: var(--foreground);
    border: 1px solid var(--input); border-radius: var(--radius-md);
    font-size: var(--text-sm); box-shadow: var(--shadow-xs); outline: none;
    transition: border-color 150ms, box-shadow 150ms;
}
.c-input::placeholder { color: var(--muted-foreground); }
.c-input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
.c-input[aria-invalid="true"] { border-color: var(--destructive); }
.c-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent); }
.c-input[readonly] { background: var(--muted); color: var(--muted-foreground); box-shadow: none; }
.c-input[readonly]:focus { border-color: var(--input); box-shadow: none; }

/* prefixo "acessoquery.com/" do endereço da empresa */
.c-grupo { display: flex; align-items: stretch; border: 1px solid var(--input); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); transition: border-color 150ms, box-shadow 150ms; }
.c-grupo:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
.c-grupo[aria-invalid="true"] { border-color: var(--destructive); }
.c-grupo-prefixo { display: flex; align-items: center; padding: 0 0 0 12px; color: var(--muted-foreground); font-size: var(--text-sm); white-space: nowrap; user-select: none; }
.c-grupo .c-input { border: 0; box-shadow: none; padding-left: 1px; }
.c-grupo .c-input:focus { box-shadow: none; }

.c-erro { font-size: var(--text-sm); color: var(--destructive); margin: 0; }
.c-check { display: flex; align-items: center; gap: 12px; font-size: var(--text-sm); font-weight: 500; cursor: pointer; user-select: none; }
.c-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }

/* ---------------- botões e links ---------------- */
.c-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 36px; padding: 8px 16px; width: 100%;
    border-radius: var(--radius-md); border: 1px solid transparent;
    font-size: var(--text-sm); font-weight: 500; line-height: 1.25; text-decoration: none; cursor: pointer;
    box-shadow: var(--shadow-xs); transition: background-color 150ms, box-shadow 150ms;
}
.c-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent); }
.c-btn[disabled] { opacity: .6; pointer-events: none; }
.c-btn-primario { background: var(--primary); color: var(--primary-foreground); margin-top: 16px; }
.c-btn-primario:hover { background: color-mix(in srgb, var(--primary) 90%, transparent); }
.c-btn-contorno { background: var(--background); color: var(--foreground); border-color: var(--input); }
.c-btn-contorno:hover { background: var(--accent-subtle, var(--muted)); }
.c-btns { display: flex; gap: 12px; }
.c-btns .c-btn { margin-top: 0; }

.c-link {
    color: var(--foreground); text-decoration: underline; text-underline-offset: 4px;
    text-decoration-color: color-mix(in srgb, var(--foreground) 30%, transparent);
    transition: text-decoration-color 300ms;
}
.c-link:hover { text-decoration-color: currentColor; }

/* ---------------- avisos ---------------- */
.c-aviso { border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--text-sm); line-height: 1.5; text-align: center; }
.c-aviso-ok { color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--card)); }
.c-aviso-erro { color: var(--destructive); background: color-mix(in srgb, var(--destructive) 7%, var(--card)); }
.c-aviso-info { color: var(--foreground); background: var(--muted); }
.c-codigo-local { font-family: var(--font-mono, monospace); font-weight: 600; letter-spacing: 3px; }

/* lembrete discreto de confirmar o e-mail (Sua conta) */
.c-lembrete { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--primary) 5%, var(--card)); color: var(--muted-foreground); text-decoration: none; font-size: 13px; line-height: 1.45; transition: border-color 150ms; }
.c-lembrete strong { display: block; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; }
.c-lembrete svg { margin-left: auto; flex: none; color: var(--primary); }
.c-lembrete:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }

/* ---------------- lista de acessos (Sua conta) ---------------- */
.c-secao { display: flex; flex-direction: column; gap: 8px; }
.c-secao-titulo { font-size: 12px; font-weight: 500; color: var(--muted-foreground); margin: 0; }
.c-acessos { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.c-acessos li + li { border-top: 1px solid var(--border); }
.c-acesso { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: inherit; text-decoration: none; transition: background-color 150ms; }
a.c-acesso:hover { background: var(--muted); }
.c-acesso-produto { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--card)); border-radius: var(--radius-sm); padding: 3px 7px; }
.c-acesso-texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c-acesso-empresa { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-acesso-endereco { font-size: 12px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-acesso-seta { margin-left: auto; flex: none; color: var(--muted-foreground); }
.c-vazio { border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 16px; text-align: center; color: var(--muted-foreground); line-height: 1.5; margin: 0; }

@media (max-width: 480px) {
    .contas-page { justify-content: flex-start; padding: 32px 16px; }
    .contas-card-head { padding: 24px 24px 0; }
    .contas-card-body { padding: 24px; }
}


/* ---------------- destaques (login) ----------------
   Mesmo padrão do "Destaque do portal" do CRM: no computador o destaque
   ocupa a metade esquerda (imagem inteira, sombreado, título grande); no
   celular vira um cartão grande logo abaixo do login. */
.c-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contas-page--destaques { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(480px, 1fr); align-items: stretch; justify-items: center; gap: 0; padding: 20px; }
.contas-page--destaques .contas-coluna { grid-column: 2; grid-row: 1; align-self: center; padding: 24px; }
.contas-page--destaques .c-destaques { grid-column: 1; grid-row: 1; width: 100%; }

.c-destaques { position: relative; isolation: isolate; min-height: 620px; height: 100%; border-radius: 22px; overflow: hidden; background: var(--neutral-950); color: #fff; display: grid; }
.c-destaque { grid-area: 1 / 1; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; opacity: 0; visibility: hidden; transition: opacity 500ms, visibility 500ms; }
.c-destaque.is-ativo { opacity: 1; visibility: visible; }
.c-destaque-midia { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.c-destaque-sombra { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(10 10 10 / .45) 0%, rgb(10 10 10 / .06) 16%, rgb(10 10 10 / .10) 38%, rgb(10 10 10 / .82) 58%, rgb(10 10 10 / .95) 72%, rgb(10 10 10 / .97) 100%); }
.c-destaque--sem-midia { background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--query-purple-500) 55%, transparent), transparent 60%), radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--query-blue-500, #3b82f6) 35%, transparent), transparent 60%), var(--neutral-950); }
.c-destaque--sem-midia .c-destaque-sombra { display: none; }
.c-destaque-marca { text-shadow: 0 1px 2px rgb(0 0 0 / .35); display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.c-destaque-texto { max-width: 580px; padding-top: 160px; }
.c-destaque-selo { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .75); }
.c-destaque-titulo { text-shadow: 0 1px 2px rgb(0 0 0 / .35); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; font-weight: 650; letter-spacing: -0.04em; margin: 14px 0 0; text-wrap: balance; overflow-wrap: anywhere; }
.c-destaque-descricao { text-shadow: 0 1px 2px rgb(0 0 0 / .35); font-size: 15px; line-height: 1.7; color: rgb(255 255 255 / .82); margin: 18px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.c-destaque-link { display: inline-flex; align-items: center; gap: 16px; margin-top: 26px; padding: 11px 18px; border: 1px solid rgb(255 255 255 / .5); border-radius: 9px; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color 200ms, transform 200ms; }
.c-destaque-link:hover { background: rgb(255 255 255 / .1); transform: translateY(-2px); }
.c-destaque-link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.c-destaques-pontos { position: absolute; left: 48px; bottom: 28px; z-index: 2; display: flex; gap: 6px; }
.c-destaques-ponto { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgb(255 255 255 / .45); cursor: pointer; transition: width 200ms, background-color 200ms; }
.c-destaques-ponto.is-ativo { width: 22px; background: #fff; }
.c-destaques-ponto:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.c-destaques[data-destaques] .c-destaque { padding-bottom: 64px; }

/* Tela baixa (notebook): texto mais compacto para não subir sobre as capturas. */
@media (min-width: 1024px) and (max-height: 820px) {
    .c-destaque { padding: 36px 40px; }
    .c-destaques[data-destaques] .c-destaque { padding-bottom: 56px; }
    .c-destaque-texto { padding-top: 0; }
    .c-destaque-titulo { font-size: clamp(26px, 2.5vw, 34px); margin-top: 10px; }
    .c-destaque-descricao { font-size: 14px; line-height: 1.6; margin-top: 12px; }
    .c-destaque-link { margin-top: 18px; padding: 9px 16px; }
    .c-destaques-pontos { left: 40px; bottom: 24px; }
}

@media (max-width: 1023px) {
    .contas-page--destaques { display: flex; flex-direction: column; justify-content: flex-start; padding: 24px; gap: 24px; }
    .contas-page--destaques .contas-coluna { padding: 0; order: 1; }
    .contas-page--destaques .c-destaques { order: 2; }
    /* No celular a arte fica inteira em cima e o texto embaixo, sem sobrepor. */
    .c-destaques { max-width: 448px; min-height: 0; height: auto; border-radius: 16px; }
    .c-destaque { padding: 0; justify-content: flex-start; }
    .c-destaque-midia { position: relative; inset: auto; z-index: 0; display: block; width: 100%; height: 236px; object-position: center top; }
    .c-destaque-sombra { inset: 0 0 auto 0; height: 236px; z-index: 1; background: linear-gradient(180deg, rgb(10 10 10 / .35) 0%, rgb(10 10 10 / 0) 22%, rgb(10 10 10 / 0) 70%, var(--neutral-950) 100%); }
    .c-destaque-marca { position: absolute; top: 16px; left: 20px; z-index: 2; font-size: 15px; }
    .c-destaque-marca img { width: 22px; height: 22px; }
    .c-destaque-texto { padding: 6px 24px 28px; max-width: none; }
    .c-destaque--sem-midia .c-destaque-texto { padding-top: 72px; }
    .c-destaques[data-destaques] .c-destaque { padding-bottom: 28px; }
    .c-destaque-titulo { font-size: 24px; margin-top: 10px; }
    .c-destaque-descricao { font-size: 14px; line-height: 1.6; margin-top: 10px; }
    .c-destaque-link { margin-top: 18px; }
    .c-destaques-pontos { left: 24px; bottom: 18px; }
}
@media (max-width: 480px) {
    .contas-page--destaques { padding: 32px 16px; }
}