@charset "UTF-8";
/* =========================================================================
   TASK INTERNET | Telas de área do cliente
   Layout único, compartilhado por: Alterar forma de pagamento, Atualizar
   cadastro, Extrato de serviços, Nota fiscal e Segunda via de cobrança.
   Convertido de ui_kits/site/AccessParts.jsx (componente AccessPage).
   Depende de task-ds.css. Escopo: .tk-access
   ========================================================================= */

/* 1. Cabeçalho --------------------------------------------------------- */
.task-page .tk-access__head{background:var(--white);
  padding-top:var(--section-y);padding-bottom:var(--space-12)}
.task-page .tk-access__head .tk-container{display:flex;flex-direction:column;
  gap:var(--space-6);align-items:center;text-align:center}
.task-page .tk-access__intro{color:var(--blue-500);font-size:var(--fs-body);
  line-height:var(--lh-relaxed);max-width:640px}

/* 2. Card de acesso ---------------------------------------------------- */
.task-page .tk-access__body{background:var(--white);padding-bottom:var(--section-y)}
.task-page .tk-access__card{background:var(--white);border-radius:var(--radius-xl);
  border:1px solid var(--border-subtle);box-shadow:var(--shadow-md);
  padding:var(--space-12);max-width:560px;margin-inline:auto;width:100%;
  box-sizing:border-box;display:flex;flex-direction:column;gap:var(--space-6)}

/* 3. Campos ------------------------------------------------------------ */
.task-page .tk-access__field{display:flex;flex-direction:column;gap:var(--space-2)}
.task-page .tk-access__label{color:var(--text-body-strong);font-size:var(--fs-label);
  font-weight:var(--fw-semibold)}
.task-page .tk-access__input{width:100%;box-sizing:border-box;font-family:inherit;
  font-size:var(--fs-body-sm);color:var(--text-heading);background:var(--white);
  border:1px solid var(--border-default);border-radius:var(--radius-md);
  padding:13px var(--space-4);min-height:46px;
  transition:border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard)}
.task-page .tk-access__input:focus{outline:none;border-color:var(--border-strong);
  box-shadow:var(--shadow-focus)}
.task-page .tk-access__input::placeholder{color:var(--text-body)}

/* 4. Bloco do reCAPTCHA ------------------------------------------------ */
.task-page .tk-access__captcha{display:flex;align-items:center;gap:var(--space-4);
  background:var(--surface-subtle);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-5)}
.task-page .tk-access__captcha-box{width:22px;height:22px;flex:none;
  border:2px solid var(--border-strong);border-radius:4px}
.task-page .tk-access__captcha-text{color:var(--text-body);font-size:var(--fs-body-sm)}

/* 5. Ações e nota de rodapé -------------------------------------------- */
.task-page .tk-access__card .tk-actions{gap:var(--space-6)}
.task-page .tk-access__lock{display:flex;gap:var(--space-3);align-items:flex-start;
  color:var(--text-body);font-size:var(--fs-caption);line-height:var(--lh-normal);margin:0}
.task-page .tk-access__lock .tk-i{width:16px;height:16px;color:var(--blue-500);margin-top:2px}

/* 6. Responsivo -------------------------------------------------------- */
@media (max-width:900px){
  .task-page .tk-access__card{padding:var(--space-6)}
  .task-page .tk-access__intro{text-align:center;margin-inline:auto}
  .task-page .tk-access__label{text-align:left}
  .task-page .tk-access__lock{text-align:left}
  /* Campo com 16px evita o zoom automático do iOS ao focar */
  .task-page .tk-access__input{font-size:16px;min-height:46px}
  .task-page .tk-access__card .tk-actions{flex-direction:column;align-items:stretch}
  .task-page .tk-access__card .tk-actions>a{flex:none;justify-content:center}
}