/* modal.css — modal padrão dos produtos (card #167). Só tokens do tema (tema-logiccos: --cor-*, --raio-*,
   --brilho-*), com recuo para quem ainda não carregou o tema. Comportamento em modal.browser.js.
   Card #210: cada token do tema-logiccos recua para o equivalente do tema-claro-escuro (--cor-superficie*,
   --cor-contorno, --cor-primaria*, --cor-campo-*) antes do valor fixo — sem isso, no escuro desse tema o
   cabeçalho caía no #f8fafc com o --cor-texto claro por cima. */
.kit-modal{
  --kit-modal-largura:75rem;
  box-sizing:border-box;padding:0;margin:auto;
  /* Área segura (card #322): app que desenha por baixo da barra de status e dos botões do Android (viewport-fit=cover)
     mantém o modal entre os dois. Em navegador comum env() vale 0 e nada muda. */
  top:env(safe-area-inset-top,0px);bottom:env(safe-area-inset-bottom,0px);
  width:min(var(--kit-modal-largura),calc(100vw - 4rem));height:fit-content;
  min-width:min(18rem,calc(100vw - 2rem));min-height:10rem;
  max-width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  resize:both;overflow:hidden;
  background:var(--cor-painel,var(--cor-superficie,#fff));color:var(--cor-texto,#0f172a);
  border:1px solid var(--cor-borda,var(--cor-contorno,#d5dde8));border-radius:var(--raio-painel,1rem);
  box-shadow:0 24px 48px -12px rgba(0,0,0,.45),var(--brilho-verde-fraco,0 0 0 transparent);
  font-family:var(--fonte-sans,system-ui,sans-serif);
}
.kit-modal[open]{display:flex;flex-direction:column;}
.kit-modal::backdrop{background:var(--scrim,var(--cor-veu,rgba(0,0,0,.6)));backdrop-filter:blur(2px);}
.kit-modal--sm{--kit-modal-largura:28rem;}
.kit-modal[data-redimensionar="false"]{resize:none;}
.kit-modal--md{--kit-modal-largura:1100px;width:min(92vw,var(--kit-modal-largura));}
.kit-modal--lg{--kit-modal-largura:1100px;width:min(92vw,var(--kit-modal-largura));}
.kit-modal--full{--kit-modal-largura:100vw;}
@media (max-width:1024px){
  .kit-modal{width:min(var(--kit-modal-largura),calc(100vw - 2rem));}
}

.kit-modal__cabecalho{
  flex:0 0 auto;display:flex;align-items:center;gap:.5rem;
  padding:.75rem .75rem .75rem 1rem;border-bottom:1px solid var(--cor-borda,var(--cor-contorno,#d5dde8));
  background:var(--cor-cartao-claro,var(--cor-superficie-1,#f8fafc));cursor:grab;user-select:none;touch-action:none;
}
.kit-modal--arrastando .kit-modal__cabecalho{cursor:grabbing;}
.kit-modal__alca{display:inline-flex;color:var(--cor-texto-suave,var(--cor-texto-secundario,#475569));}
.kit-modal__titulo{flex:1 1 auto;min-width:0;margin:0;font-size:1rem;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cor-texto,#0f172a);}
.kit-modal__acoes{display:flex;gap:.25rem;flex:0 0 auto;}
.kit-modal__botao{
  display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;
  border:1px solid transparent;border-radius:var(--raio-item,.75rem);background:transparent;
  color:var(--cor-texto-suave,var(--cor-texto-secundario,#475569));cursor:pointer;
}
.kit-modal__botao:hover{background:var(--cor-chip,var(--cor-neutro-fundo,#e6ecf4));color:var(--cor-texto,#0f172a);}
.kit-modal__botao:focus-visible{outline:2px solid var(--cor-verde,var(--cor-foco,#41771a));outline-offset:2px;}

.kit-modal__corpo{flex:1 1 auto;min-height:0;overflow:auto;padding:1rem;overscroll-behavior:contain;}
.kit-modal__rodape{
  flex:0 0 auto;display:flex;gap:.5rem;padding:.75rem 1rem;
  border-top:1px solid var(--cor-borda,var(--cor-contorno,#d5dde8));background:var(--cor-cartao-claro,var(--cor-superficie-1,#f8fafc));
}

/* Regra de formulário: campos e botões ocupam a largura do corpo (o "campo num terço da tela" do card #167).
   Card #442: em tela grande (> 640px), formulário dentro de modal md/lg/full aproveita a largura (md/lg: min(92vw, 1100px)) com campos
   lado a lado quando couber (base de 20rem; o que sobra estica a linha inteira, sem buraco), e tabelas ocupam 100%. */
.kit-modal__corpo :where(table){width:100%;border-collapse:collapse;}
.kit-modal__corpo form{display:flex;flex-direction:column;gap:.75rem;width:100%;margin:0;}
.kit-modal__corpo form > :is([hidden],input[type="hidden"],script,template){display:none !important;}
@media (min-width:641px){
  .kit-modal:not(.kit-modal--sm) .kit-modal__corpo form:not([data-colunas="1"]):not([class*="grid-cols-"]){
    flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:.875rem 1rem;
  }
  .kit-modal:not(.kit-modal--sm) .kit-modal__corpo form:not([data-colunas="1"]):not([class*="grid-cols-"]) > *{
    flex:1 1 min(100%,20rem);width:auto;min-width:0;margin-top:0 !important;margin-bottom:0 !important;
  }
  .kit-modal:not(.kit-modal--sm) .kit-modal__corpo form:not([data-colunas="1"]):not([class*="grid-cols-"]) > :is(
    textarea,fieldset,table,hr,h1,h2,h3,h4,p,
    .kit-form__acoes,.kit-form__erro-geral,[role="alert"],
    .kit-modal__linha-cheia,.kit-form__campo--largo,[data-largura="total"],
    label:has(> textarea),.kit-form__campo:has(textarea),
    label:has(> input[type="checkbox"],> input[type="radio"]),
    div:has(> textarea,> table,> h2,> h3,> button[type="submit"],> .btn-primary,> [data-kit-tabela-rolagem],> .kit-tabela-rolagem,> .kit-mpm)
  ){
    flex:1 1 100%;width:100%;
  }
}
/* 1.6.0 (card #442, coordenadora 25/10/2026): a partir de 1280px o formulário de modal md/lg vira grade de 2 colunas
   iguais (o que é de linha inteira acima continua em linha inteira). */
@media (min-width:1280px){
  .kit-modal:is(.kit-modal--md,.kit-modal--lg) .kit-modal__corpo form:not([data-colunas="1"]):not([class*="grid-cols-"]){
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem 1rem;align-items:start;
  }
  .kit-modal:is(.kit-modal--md,.kit-modal--lg) .kit-modal__corpo form:not([data-colunas="1"]):not([class*="grid-cols-"]) > :is(
    textarea,fieldset,table,hr,h1,h2,h3,h4,p,
    .kit-form__acoes,.kit-form__erro-geral,[role="alert"],
    .kit-modal__linha-cheia,.kit-form__campo--largo,[data-largura="total"],
    label:has(> textarea),.kit-form__campo:has(textarea),
    label:has(> input[type="checkbox"],> input[type="radio"]),
    div:has(> textarea,> table,> h2,> h3,> button[type="submit"],> .btn-primary,> [data-kit-tabela-rolagem],> .kit-tabela-rolagem,> .kit-mpm)
  ){
    grid-column:1 / -1;width:auto;
  }
}
.kit-modal__corpo label{display:flex;flex-direction:column;gap:.25rem;width:100%;font-size:.875rem;color:var(--cor-texto-suave,var(--cor-texto-secundario,#475569));}
.kit-modal__corpo :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  box-sizing:border-box;width:100%;max-width:none;
  padding:.625rem .75rem;border:1px solid var(--cor-borda,var(--cor-campo-contorno,#d5dde8));border-radius:var(--raio-item,.75rem);
  background:var(--cor-campo-fundo,var(--cor-fundo,#f3f6fa));color:var(--cor-campo-texto,var(--cor-texto,#0f172a));font:inherit;font-size:.9375rem;
}
.kit-modal__corpo :is(input,select,textarea):focus-visible{outline:2px solid var(--cor-verde,var(--cor-foco,#41771a));outline-offset:1px;border-color:var(--cor-verde,var(--cor-foco,#41771a));}
.kit-modal__corpo label:has(> input[type="checkbox"],> input[type="radio"]){flex-direction:row;align-items:center;gap:.5rem;}
.kit-modal__rodape > :is(button,a){flex:1 1 0;}
.kit-modal__rodape button,.kit-modal__corpo button{
  box-sizing:border-box;min-height:2.5rem;padding:.5rem 1rem;border-radius:var(--raio-item,.75rem);
  border:1px solid var(--cor-borda,var(--cor-contorno,#d5dde8));background:var(--cor-cartao,var(--cor-superficie,#fff));color:var(--cor-texto,#0f172a);
  font:inherit;font-weight:500;cursor:pointer;
}
.kit-modal__rodape .kit-modal__primario,.kit-modal__rodape button[type="submit"]{
  background:var(--cor-verde,var(--cor-primaria,#41771a));border-color:var(--cor-verde,var(--cor-primaria,#41771a));color:var(--cor-sobre-verde,var(--cor-on-primaria,#fff));
}
.kit-modal__rodape .kit-modal__primario:hover,.kit-modal__rodape button[type="submit"]:hover{
  background:var(--cor-verde-hover,var(--cor-primaria-hover,#336116));box-shadow:var(--brilho-verde,none);
}

/* Ação perigosa (ex.: confirmar remover acesso, bloco confirmacao-aviso): vermelho, classe própria para não cair nas
   regras do produto que pintam o primário/submit. */
.kit-modal__rodape .kit-modal__perigo,.kit-modal__rodape button[data-perigo="true"]{
  background:var(--cor-perigo,#dc2626);border-color:var(--cor-perigo,#dc2626);color:#fff;
}
.kit-modal__rodape .kit-modal__perigo:hover,.kit-modal__rodape button[data-perigo="true"]:hover{background:var(--cor-perigo-hover,#b91c1c);border-color:var(--cor-perigo-hover,#b91c1c);}

/* Maximizado e celular: tela toda, sem redimensionar. !important só aqui: vencem o left/top/width/height
   inline que o arraste e o redimensionar deixam (ex.: girou o celular depois de arrastar no tablet). */
.kit-modal--maximizado,.kit-modal--full{border-radius:0;}
.kit-modal--maximizado{
  inset:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px) 0 !important;margin:0 !important;width:100vw !important;
  height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important;
  max-width:none;max-height:none;resize:none;border-radius:0;
}
@media (max-width:640px){
  .kit-modal{
    inset:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px) 0 !important;margin:0 !important;width:100vw !important;
    height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important;
    min-width:0;max-width:none;max-height:none;resize:none;border-radius:0;border:0;
  }
  .kit-modal__cabecalho{cursor:default;}
  .kit-modal__alca,.kit-modal [data-kit-modal="maximizar"]{display:none;}
  .kit-modal__rodape{flex-direction:column-reverse;}
}
@media (prefers-reduced-motion:no-preference){
  .kit-modal[open]{animation:kit-modal-entra .16s ease-out;}
}
@keyframes kit-modal-entra{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}