/* /styles.css */
/* + azul no fundo do formulário, sem "X" nos identificadores,
   e X dos itens dinâmicos só a partir do 2º. Mantém paleta ZEISS e transições. */

:root{
  --zeiss-900: 205 100% 21%;
  --zeiss-800: 205 100% 26%;
  --zeiss-700: 205 100% 31%;
  --zeiss-600: 205 96% 36%;
  --zeiss-500: 205 92% 42%;
  --zeiss-400: 205 88% 50%;
  --zeiss-300: 205 86% 58%;
  --zeiss-200: 205 84% 72%;
  --zeiss-100: 205 78% 88%;

  --ink: 222 22% 12%;
  --muted: 220 16% 96%;
  --muted-2: 220 20% 98%;
  --border: 220 18% 88%;
  --hint: 215 10% 46%;
  --ok: 142 70% 33%;
  --err: 0 78% 56%;

  --radius: 16px;
  --radius-lg: 24px;

  --shadow-1: 0 6px 28px rgba(8,15,40,.07);
  --shadow-2: 0 10px 40px rgba(0,78,155,.18);

  --t: .22s cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
  color:hsl(var(--ink));
  background: radial-gradient(1200px 600px at 120% -10%, hsl(var(--zeiss-100)/.6), transparent 60%) #fff;
}

/* Fundo */
.tech-bg{position:fixed;inset:0;z-index:-2;overflow:hidden}
.grid-overlay{
  position:absolute;inset:0;opacity:.22;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image: radial-gradient(1200px 700px at 70% -10%, #000, transparent 60%);
}
.orb{position:absolute;filter:blur(44px);border-radius:50%}
.orb-a{width:520px;height:520px;left:-180px;top:-120px;background:radial-gradient(circle at 40% 40%, hsl(var(--zeiss-400)/.9), hsl(var(--zeiss-700)/.7))}
.orb-b{width:520px;height:520px;right:-160px;bottom:-160px;background:radial-gradient(circle at 60% 60%, hsl(var(--zeiss-300)/.8), hsl(var(--zeiss-700)/.7))}

/* Cabeçalho */
.site-header{max-width:1120px;margin:28px auto 18px;padding:0 20px;text-align:center}
.brand-wrap{position:relative;display:inline-block}
.brand{height:56px;object-fit:contain;display:block;filter:drop-shadow(0 8px 20px rgba(0,84,159,.25))}
.brand-glow{position:absolute;inset:-12px;border-radius:14px;background:radial-gradient(260px 80px at 50% -20%, hsl(var(--zeiss-300)/.6), transparent 60%);pointer-events:none}
.site-header h1{margin:10px 0 4px;font-size:28px;font-weight:800;letter-spacing:-.01em;color:hsl(var(--zeiss-700))}
.subtitle{margin:0;color:hsl(var(--hint));font-weight:500}

/* Container principal */
.page{max-width:1120px;margin:0 auto;padding:24px 20px 56px}

/* Card – agora com fundo mais azul */
.card{
  position:relative;
  background:
    radial-gradient(900px 300px at 10% 0%, hsl(var(--zeiss-100)/.85), transparent 60%),
    radial-gradient(900px 300px at 100% 100%, hsl(var(--zeiss-100)/.70), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.90));
  border:1px solid hsl(var(--border));
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  backdrop-filter:saturate(140%) blur(8px);
  overflow:hidden;
}
.form-card{padding:28px}
.card-glow{position:absolute;inset:0;background:radial-gradient(1000px 300px at 50% -20%, hsl(var(--zeiss-200)/.7), transparent 60%);opacity:.7;pointer-events:none}

/* Seções */
.form-section + .form-section{margin-top:28px}
.section-title{font-size:18px;font-weight:700;color:hsl(var(--ink));margin:0 0 12px;letter-spacing:.2px}
.section-title.big{font-size:24px;color:hsl(var(--zeiss-700))}
.asterisk{color:hsl(var(--err))}
.helper{margin-top:6px;color:hsl(var(--hint));font-size:13px;font-style:italic}

/* Grades */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-phone{grid-template-columns:minmax(0,0.85fr) auto} /* telefone um pouco menor */
@media (max-width:960px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:680px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .grid-phone{grid-template-columns:1fr auto}
}

/* nova grade equipamentos 2:1:auto */
.grid-equip{grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto}
@media (max-width:960px){.grid-equip{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.grid-equip{grid-template-columns:1fr}}

/* Campos */
.field{display:flex;flex-direction:column;gap:8px}
.label{font-size:14px;color:hsl(var(--ink));font-weight:700;letter-spacing:.2px}
.input-wrap{position:relative}
input, textarea{
  width:100%;font-size:15px;line-height:1.5;padding:14px 16px;
  border:1px solid hsl(var(--border));background:#fff;border-radius:14px;
  transition:border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t);
  transform:translateZ(0)
}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:hsl(var(--hint));opacity:.85}
input:hover,textarea:hover{border-color:hsl(var(--zeiss-300)/.9)}
input:focus,textarea:focus{outline:none;border-color:hsl(var(--zeiss-600));box-shadow:0 0 0 4px hsl(var(--zeiss-400)/.18),0 10px 28px rgba(0,78,155,.12);background:#fff}
input.disabled{opacity:.55;cursor:not-allowed}
.hint{font-size:12px;color:hsl(var(--hint))}

/* Choices */
.choice{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;transition:transform var(--t)}
.choice:active{transform:scale(.98)}
.choice .choice-mark{width:18px;height:18px;border-radius:50%;border:2px solid hsl(var(--zeiss-600));display:inline-block;position:relative;flex:0 0 18px;box-shadow:inset 0 0 0 0 hsl(var(--zeiss-600));transition:box-shadow var(--t), background var(--t)}
.choice input{appearance:none;width:0;height:0;position:absolute;opacity:0}
.choice input:checked + .choice-mark{background:radial-gradient(circle at 50% 50%, hsl(var(--zeiss-600)) 0 6px, transparent 6px);box-shadow:0 0 0 4px hsl(var(--zeiss-400)/.22)}
.choice-inline{display:flex;gap:28px;align-items:center}
.choice-list{display:flex;flex-direction:column;gap:14px}
.align-center{align-items:center}
.top-gap{margin-top:30px}

/* Field-card (reserva espaço p/ botão remover à direita) */
.stack{display:flex;flex-direction:column;gap:14px}
.field-card{
  padding:16px 56px 16px 16px; /* espaço para o "X" à direita */
  border:1px solid hsl(var(--border));border-radius:20px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.92));
  position:relative;transition:transform var(--t), box-shadow var(--t), border-color var(--t)
}
.field-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-1);border-color:hsl(var(--zeiss-300)/.6)}
.field-card .btn.ghost{position:absolute;right:10px;top:50%;transform:translateY(-50%)}

/* --------- NOVO: endereço por equipamento dentro do card --------- */
.field-card .equip-address{margin-top:10px}
.field-card .equip-address .label{font-weight:700}
.field-card .equip-address input{background:#fff}

/* Botões */
.add-block{margin-top:12px}
.btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:14px;border:1px solid hsl(var(--border));background:#fff;color:hsl(var(--ink));
  font-weight:700;font-size:15px;cursor:pointer;transition:transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t)
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(8,15,40,.08)}
.btn.primary{background:hsl(var(--zeiss-700));border-color:hsl(var(--zeiss-700));color:#fff;box-shadow:var(--shadow-2)}
.btn.primary:hover{background:hsl(var(--zeiss-800))}
.btn.lg{min-width:220px;font-size:16px;padding:14px 22px;border-radius:18px}
.btn.ghost{background:transparent;border-color:transparent;color:hsl(var(--hint));font-weight:800}
.btn.add{width:100%;background:#fff;border-color:hsl(var(--border));color:hsl(var(--ink))}
.btn.add:hover{background:hsl(var(--muted-2))}
.plus{font-size:22px;line-height:0;display:inline-block;transform:translateY(-1px)}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:hsl(var(--zeiss-400)/.25);animation:ripple .6s linear}
@keyframes ripple{to{transform:scale(3.2);opacity:0}}
.actions{display:flex;justify-content:center;margin-top:28px}

/* Loader / overlay */
.loader{display:inline-block;width:16px;height:16px;border:2px solid hsl(var(--muted));border-top:2px solid hsl(var(--zeiss-600));border-radius:50%;animation:spin 1s linear infinite}
.loader.tiny{width:14px;height:14px;vertical-align:middle;margin-left:6px}
.hidden{display:none !important}
.invalid{border-color:hsl(var(--err)) !important;box-shadow:0 0 0 4px hsl(var(--err)/.18) !important}
@keyframes spin{to{transform:rotate(360deg)}}

.loading-overlay{position:fixed;inset:0;background:rgba(6,10,20,.55);display:flex;align-items:center;justify-content:center;z-index:9998}
.loading-content{background:#fff;border-radius:16px;padding:18px 22px;box-shadow:var(--shadow-2);text-align:center}
.spinner{width:42px;height:42px;border-radius:50%;border:3px solid hsl(var(--border));border-top-color:hsl(var(--zeiss-700));animation:spin 1s linear infinite;margin:0 auto 10px}

/* Toasts */
.toast-container{position:fixed;top:18px;right:18px;display:flex;flex-direction:column;gap:10px;z-index:9999}
.toast{width:320px;background:#fff;border:1px solid hsl(var(--border));border-left-width:6px;border-radius:14px;box-shadow:var(--shadow-1);padding:12px 14px;opacity:0;transform:translateX(12px);transition:opacity var(--t), transform var(--t)}
.toast.show{opacity:1;transform:none}
.toast.success{border-left-color:hsl(var(--ok))}
.toast.error{border-left-color:hsl(var(--err))}
.toast-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.toast-head strong{font-size:14px}
.toast-close{border:0;background:transparent;font-size:18px;cursor:pointer;color:hsl(var(--hint))}

/* Scroll reveal seguro */
.reveal{opacity:1;transform:none}
.js-enabled .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
.js-enabled .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal,.js-enabled .reveal{opacity:1 !important;transform:none !important}
  .btn,.field-card,.choice{transition:none}
}

/* Responsividade */
@media (max-width:560px){
  .form-card{padding:20px}
  .btn.lg{width:100%}
}

/* --------- NOVO: bloqueio visual do Stage 2 até concluir Passo 1 --------- */
[data-stage="2"].locked{
  opacity:.55;
  pointer-events:none;
  filter:saturate(.7);
  transition:opacity .25s ease, filter .25s ease;
}

/* Inscrição estadual — radios em linha */
#ie-status-group { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }

.choice-inline{
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap: wrap;        /* permite quebrar linha */
}
#ie-status-group .choice:nth-child(3){ /* “Possuo mas quero remover” */
  flex-basis: 100%;       /* força ir para a linha de baixo */
}

/* =========================
   AJUSTES DE RESPONSIVIDADE
   PARA STEP 1 (CNPJ/CPF/CÓD)
   + IE + DATA NASCIMENTO
   ========================= */
@media (max-width: 680px) {
  /* Garante 1 item por linha no mobile, mesmo se houver grid-column/row inline */
  .grid .field {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Mais respiro entre os grupos de rádio */
  .choice-inline,
  #ie-status-group {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Deixa os labels dos radios quebrarem melhor em telas estreitas */
  .choice {
    max-width: 100%;
    white-space: normal;
  }
}


/* =============================
   FIX forte de responsividade
   para a 1ª grade (identificadores + IE + Data Nasc.)
   ============================= */
@media (max-width: 900px) {
  /* 1) Força qualquer grid .grid-3/.grid-2 a virar 1 coluna */
  .grid.grid-3,
  .grid.grid-2,
  .form-section.grid-3,
  .form-section.grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* 2) Anula posicionamentos manuais que “quebram” o fluxo no mobile
        (ex.: grid-column: 2; grid-row: 2; usados no IE/DOB) */
  .grid .field {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  /* 3) Evita que algum min-width estoure a linha no mobile */
  .grid .field,
  .grid .field .input-wrap,
  .grid .field input,
  .grid .field textarea {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* 4) Radios (IE, Tipo de Cliente, Esfera) com quebra suave */
  .choice-inline,
  #ie-status-group {
    flex-wrap: wrap;
    gap: 12px;
  }
  .choice { max-width: 100%; white-space: normal; }
}

/* =========================================================
   EXTRA — IDENTIFICADORES (CNPJ/CPF/CÓD) UM POR LINHA NO MOBILE
   Repete o comportamento dos campos de e-mail.
   Usa :has() para mirar apenas o container correto sem mudar o HTML.
   Inclui fallback para navegadores sem :has().
   ========================================================= */
@media (max-width: 900px) {
  /* Container que possui um dos identificadores vira 1 coluna */
  .grid.form-section:has(#cnpj),
  .grid.form-section:has(#cpf),
  .grid.form-section:has(#codigoCliente),
  .grid.form-section:has(#codCliente),
  .grid.grid-3.form-section:has(#cnpj),
  .grid.grid-3.form-section:has(#cpf),
  .grid.grid-3.form-section:has(#codigoCliente),
  .grid.grid-3.form-section:has(#codCliente) {
    grid-template-columns: 1fr !important;
    gap: 12px 12px;
  }

  /* Cada campo ocupa a linha inteira */
  .grid.form-section:has(#cnpj) > *,
  .grid.form-section:has(#cpf) > *,
  .grid.form-section:has(#codigoCliente) > *,
  .grid.form-section:has(#codCliente) > *,
  .grid.grid-3.form-section:has(#cnpj) > *,
  .grid.grid-3.form-section:has(#cpf) > *,
  .grid.grid-3.form-section:has(#codigoCliente) > *,
  .grid.grid-3.form-section:has(#codCliente) > * {
    grid-column: 1 / -1 !important;
  }
}

/* Fallback para navegadores sem :has() (opcional):
   Se necessário, adicione a classe 'stack-mobile-ident' no container
   que agrupa CNPJ/CPF/Código do Cliente. */
@supports not selector(:has(*)) {
  @media (max-width: 900px) {
    .stack-mobile-ident { grid-template-columns: 1fr !important; gap: 12px 12px; }
    .stack-mobile-ident > * { grid-column: 1 / -1 !important; }
  }
}

/* ==== FIXES DE RESPONSIVIDADE (IDENTIFICADORES + IE + NASCIMENTO) ==== */
@media (max-width: 900px) {
  /* 1) Toda grade de 3/2 colunas vira 1 coluna no mobile */
  .grid.grid-3.form-section,
  .grid.grid-2.form-section {
    grid-template-columns: 1fr !important;
    gap: 12px 12px;
  }

  /* 2) Anula quaisquer posicionamentos manuais (inclusive inline) */
  .grid.form-section .field {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-width: 0 !important;
  }

  /* 3) Evita overflow em inputs dentro da grid */
  .grid.form-section .field .input-wrap,
  .grid.form-section .field input,
  .grid.form-section .field textarea {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 4) Rádios (IE, Tipo de Cliente, Esfera) com quebra suave */
  #ie-status-group,
  .choice-inline {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* 5) Data de nascimento 100% da linha */
  #nascimento-section input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Opcional: apertar mais em telas bem pequenas */
@media (max-width: 680px) {
  .grid.grid-3.form-section,
  .grid.grid-2.form-section {
    gap: 10px;
  }
}