/* =========================================================================
   Oliveira Roque — shell (cabeçalho/rodapé) e páginas de cadastro/clientes.
   Consome os tokens definidos em app.css. NÃO definir cores literais aqui:
   use var(--navy), var(--gold), var(--surface), var(--line), etc.
   ========================================================================= */

/* ---- Shell: cabeçalho e rodapé (todas as páginas) ----------------------- */
.intake-header{
  min-height:88px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px max(24px,calc((100vw - 1192px)/2));
  position:relative;
}
.intake-header img{display:block;width:218px;height:60px;object-fit:contain}
.intake-header .brand-dark{display:none}
.intake-header nav{display:flex;align-items:center;gap:22px}
.intake-header nav a{font-size:13px;text-decoration:none;white-space:nowrap}
.intake-header nav a:hover{text-decoration:underline}
.intake-header nav a[aria-current=page]{font-weight:650;color:var(--gold-ink)}
.intake-header button{
  width:40px;height:40px;min-height:0;padding:0;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-sunken);color:var(--ink);font-size:22px;
  transition:border-color var(--ease);
}
.intake-header button:hover{border-color:var(--gold)}
.intake-footer{
  max-width:1240px;text-align:center;margin:36px auto 0;
  padding:0 24px 32px;color:var(--muted-soft);font-size:11px;
}

/* ---- Cabeçalho de página ------------------------------------------------ */
.intake-main{max-width:1240px;margin:38px auto;padding:0 24px}
.intake-intro{max-width:850px;margin-bottom:32px}
.intake-badge{
  display:inline-block;color:var(--gold-ink);background:var(--gold-surface);
  border-radius:var(--radius);font-size:10px;font-weight:700;
  letter-spacing:.12em;padding:8px 12px;
}
.intake-intro h1{
  font-size:clamp(28px,3.2vw,42px);font-weight:600;line-height:1.18;
  letter-spacing:-.022em;margin:18px 0 14px;
}
.intake-intro p{font-size:15px;line-height:1.7;color:var(--muted);max-width:770px}

/* ---- Cartões ------------------------------------------------------------ */
.intake-card{
  padding:28px 30px;margin-bottom:24px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
}
.intake-card-title{display:flex;gap:12px;align-items:center;margin-bottom:24px}
.intake-card-title>span{
  background:var(--btn-primary-bg);color:var(--btn-primary-ink);
  border-radius:50%;height:26px;width:26px;font-size:12px;
  display:grid;place-items:center;flex-shrink:0;
}
.intake-card h2{font-size:20px;font-weight:600;margin:0;letter-spacing:-.012em}
.intake-card-title>small{margin-left:auto;font-size:10px;letter-spacing:.08em;color:var(--gold-ink)}
.intake-card>p{font-size:13px;color:var(--muted);line-height:1.7}
.intake-card .field-error:empty{display:none}

/* ---- Escolhas (área de atuação, canal, PF/PJ) --------------------------- */
.area-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.area-choice{
  display:flex;align-items:start;gap:12px;padding:20px 16px;
  background:var(--surface-sunken);border:1px solid var(--line);
  border-radius:var(--radius);cursor:pointer;
  transition:border-color var(--ease),background var(--ease);
}
.area-choice:hover{border-color:var(--gold)}
.area-choice strong{font-weight:650;font-size:15px}
.area-choice small{display:block;margin-top:5px;font-size:12px;line-height:1.6;color:var(--muted)}
.area-choice:has(input:checked){background:var(--navy);color:#fff;border-color:var(--navy)}
.area-choice:has(input:checked) small{color:var(--gold)}
.area-choice:has(input:checked) input{accent-color:var(--gold)}
html[data-theme=dark] .area-choice:has(input:checked){background:var(--gold-surface);border-color:var(--gold);color:var(--ink)}
html[data-theme=dark] .area-choice:has(input:checked) small{color:var(--muted)}

.choice-row,.channel-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.channel-choices{margin:18px 0}
.choice{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-sunken);border:1px solid var(--line);
  border-radius:var(--radius);padding:13px;cursor:pointer;font-size:13px;
  transition:border-color var(--ease),background var(--ease);
}
.choice:hover{border-color:var(--gold)}
.choice:has(input:checked){border-color:var(--gold);background:var(--gold-surface)}
.area-choice input,.choice input,.confirmation input{margin:3px 0 0}

/* ---- Campos do cadastro -------------------------------------------------- */
.intake-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.intake-field{min-width:0;margin-bottom:4px}
.intake-field label,.plain-fieldset legend{font-size:13px;font-weight:600;display:block;margin:0 0 8px}
.intake-field small{display:block;color:var(--muted-soft);font-size:11px;line-height:1.5;margin-top:5px}
.intake-shell b{color:var(--danger);font-size:12px}
.plain-fieldset{border:0;padding:0;margin:0 0 25px}
.intake-divider{border-top:1px solid var(--line);margin:28px 0 20px;padding-top:20px}
.intake-divider h3{font-size:14px;font-weight:600;margin:0}
.cep-wrap{display:flex;align-items:start;gap:10px}
.cep-wrap .intake-field{flex:1}
.cep-wrap button{margin-top:24px;min-height:45px}
.intake-help{font-size:12px;color:var(--muted-soft);line-height:1.7}
.address-grid>p{align-self:center;margin:0}

/* ---- Botões ------------------------------------------------------------- */
.intake-secondary{
  display:inline-block;text-decoration:none;text-align:center;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  padding:11px 16px;border-radius:var(--radius);font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:border-color var(--ease),background var(--ease);
}
.intake-secondary:hover{border-color:var(--gold)}
.intake-primary{
  display:block;width:100%;
  background:var(--btn-primary-bg);border:1px solid var(--btn-primary-bg);
  border-radius:var(--radius);padding:16px 20px;
  color:var(--btn-primary-ink);font-size:14px;font-weight:650;
  cursor:pointer;margin-top:18px;text-decoration:none;
  transition:background var(--ease),border-color var(--ease);
}
.intake-primary:hover{background:var(--btn-primary-bg-hover);border-color:var(--btn-primary-bg-hover)}
.intake-primary span{margin-left:18px}

/* ---- Blocos diversos ---------------------------------------------------- */
.confirmation{display:flex;gap:12px;align-items:start;font-size:13px;line-height:1.7}
.intake-actions>p{text-align:center;font-size:12px;color:var(--muted-soft);margin-bottom:0}
.intake-shell details{margin:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.intake-shell summary{cursor:pointer;font-size:13px;font-weight:600}
.intake-shell summary small{font-weight:400;margin-left:8px;color:var(--muted-soft)}
.intake-shell details .intake-grid{margin-top:24px}
.intake-alert{
  border:1px solid var(--danger-line);border-radius:var(--radius);
  padding:15px 18px;margin-bottom:24px;
  background:var(--danger-surface);color:var(--danger);
  font-size:13px;line-height:1.7;
}

/* ---- Área de clientes --------------------------------------------------- */
.auth-main{max-width:560px;margin-top:65px}
.auth-main .intake-field{margin-bottom:20px}
.clients-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.client-search{display:flex;align-items:end;gap:12px}
.client-search .intake-field{flex:1;margin:0}
.client-search button{min-height:45px}
.clients-list{display:grid;gap:0}
.clients-list>a{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:18px 0;text-decoration:none;border-bottom:1px solid var(--line);font-size:14px;
}
.clients-list>a:hover strong{text-decoration:underline}
.clients-list small{display:block;color:var(--muted-soft);font-size:12px;margin-top:6px}
.client-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:26px 0}
.client-details dt{font-size:11px;color:var(--muted-soft);margin-bottom:6px}
.client-details dd{font-size:14px;overflow-wrap:anywhere;margin:0}

/* ---- Escolha do kit ----------------------------------------------------- */
.kit-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.kit-choice{
  display:flex;flex-direction:column;min-height:210px;padding:28px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  text-decoration:none;
  transition:border-color var(--ease),transform var(--ease),box-shadow var(--ease);
}
.kit-choice:hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.kit-choice-area{font-size:10px;color:var(--gold-ink);letter-spacing:.1em;font-weight:650}
.kit-choice h2{font-size:21px;font-weight:600;margin:18px 0 8px;letter-spacing:-.012em}
.kit-choice p{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 20px}
.kit-choice-open{font-size:12px;font-weight:650;margin-top:auto}
.kit-choice-open>span{float:right}

/* ---- Tema escuro: só o que não é coberto pelos tokens ------------------- */
html[data-theme=dark] .brand-light{display:none}
html[data-theme=dark] .intake-header .brand-dark{display:block}

/* ---- Responsivo --------------------------------------------------------- */
@media(max-width:760px){
  .intake-header{padding:14px 18px;flex-wrap:wrap;gap:10px}
  .intake-header img{width:180px;height:48px}
  .intake-header nav{gap:14px;flex-wrap:wrap}
  .intake-header nav a{font-size:12px}
  .intake-main{padding:0 16px;margin-top:24px}
  .intake-card{padding:22px 18px}
  .intake-grid,.area-choices{grid-template-columns:1fr}
  .intake-card h2{font-size:18px}
  .intake-card-title>small{display:none}
  .intake-intro h1{font-size:29px}
  .desktop-break{display:none}
  .intake-intro p{font-size:14px}
  .client-details{grid-template-columns:1fr 1fr}
  .client-search{flex-direction:column;align-items:stretch}
  .client-search .intake-field{width:100%}
  .choice-row,.channel-choices{grid-template-columns:1fr 1fr}
  .area-choice{padding:16px}
  .address-grid>p{margin-top:-12px}
  .intake-primary{font-size:13px}
  .auth-main{margin-top:30px}
  .kit-choice-grid{grid-template-columns:1fr}
  .kit-choice{padding:24px;min-height:180px}
}


/* ---- Impressão ---------------------------------------------------------- */
/* O entregável do site é o DOCX; o que se imprime é o atendimento como
   registro em papel. Some tudo que só serve na tela, e os campos passam a ler
   como linhas de texto em vez de caixas de formulário. */
@media print{
  /* O tema escuro não vai para o papel. */
  html:root,html[data-theme=dark]:root{
    color-scheme:light;
    --paper:#fff;--surface:#fff;--surface-sunken:#fff;--line:#c9c6bf;
    --ink:#000;--muted:#3a3a3a;--muted-soft:#3a3a3a;
    --gold:#6b5d37;--gold-ink:#6b5d37;--gold-surface:#fff;
    --field-bg:#fff;--field-line:#c9c6bf;
    --shadow-card:none;--shadow-lift:none;
  }
  @page{margin:14mm}
  body.intake-shell{background:#fff}

  /* Só de tela: navegação, instruções, botões e os painéis de ação. */
  .intake-header,.intake-footer,.kit-tabs,.form-note,.page-heading>p:last-child,
   .required,.panel:has(input[type=file]),
  .progress-panel,#downloads-panel,.prompts,.bpc-prompts,.tags button,
  .button,.text-button,.intake-primary,.intake-secondary,.clients-toolbar,
  .hint,.panel-description:not(#pending),.field-error:empty{display:none!important}

  .workspace{display:block;max-width:none;padding:0}
  aside{position:static;max-height:none;overflow:visible}
  .page-heading,.intake-main{margin:0 0 14px;padding:0;max-width:none}
  .panel,.intake-card{
    break-inside:avoid;page-break-inside:avoid;
    border:1px solid var(--line);box-shadow:none;margin-bottom:12px;
  }
  .panel-heading{padding:10px 14px}
  /* Impressão sai sem fundo por padrão: o número da seção vira contorno. */
  .step,.intake-card-title>span{background:none!important;color:#000!important;border:1px solid var(--line)}
  .fields{gap:10px 18px;padding:14px}
  .checklist{padding:0 14px 14px;gap:6px}

  /* O cartão vira só o nome: os valores completos vêm dos campos abaixo. */
  .client-card{padding:12px 14px;gap:0}
  .client-card-grid{display:none}
  #client-fields[hidden]{display:grid!important}

  /* Campos como linhas de leitura. */
  input,select,textarea{
    border:0!important;border-bottom:1px solid var(--line)!important;
    border-radius:0!important;background:none!important;
    padding:2px 0!important;min-height:0!important;height:auto!important;
    color:#000!important;font-size:12px!important;
    appearance:none;-webkit-appearance:none;
  }
  textarea{min-height:3.4em;resize:none}
  ::placeholder{color:transparent!important}
  select:has(option[value='']:checked){color:transparent!important}
  .field label,.intake-field label{font-size:10px;margin-bottom:2px}
  input[type=checkbox],input[type=radio]{
    appearance:auto;-webkit-appearance:auto;
    width:auto!important;border:1px solid var(--line)!important;
  }
  a[href]{text-decoration:none;color:inherit}
}