/* Componentes: card, botões, formulário (Padrao_Formulario, controles 40px), avisos. */
.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px 22px;
  box-shadow: var(--sombra);
}

.btn, .btn-primary, .btn-secundario, .btn-fantasma, .btn-perigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--controle-h);
  padding: 0 16px;
  border-radius: var(--raio-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}
.btn-primary { background: var(--cor-primaria); color: var(--texto-sobre-cor-primaria); }
.btn-primary:hover { background: var(--cor-primaria-hover); text-decoration: none; }
.btn-secundario { background: var(--superficie); border-color: var(--borda); color: var(--texto); }
.btn-secundario:hover { border-color: var(--cor-primaria); text-decoration: none; }
.btn-fantasma { background: transparent; color: var(--texto-suave); }
.btn-fantasma:hover { background: var(--fundo); color: var(--texto); text-decoration: none; }
.btn-perigo { background: var(--erro); color: #fff; }
.btn-perigo:hover { filter: brightness(.92); text-decoration: none; }

/* Padrao_Modal: .modal-bg > .modal-caixa (sm 34vw, md 55vw, lg 89vw); só o X e o Cancelar fecham
   (Padrao_Modal_Nao_Fecha_Sozinho): ESC e clique no fundo não fazem nada. JS em static/js/modal.js. */
.modal-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(2px); }
.modal-bg.visivel { display: flex; }
.modal-caixa { background: var(--superficie); border-radius: var(--raio); width: 100%; overflow-y: auto;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .25); animation: modalSobe .2s ease; display: flex; flex-direction: column; }
.modal-caixa.modal-sm { width: 34vw; max-height: 42vh; }
.modal-caixa.modal-md { width: 55vw; max-height: 70vh; }
.modal-caixa.modal-lg { width: 89vw; max-height: 90vh; }
.modal-caixa.modal-confirm { width: 34vw; max-height: 42vh; text-align: center; }
@media (max-width: 1280px) { .modal-caixa.modal-md { width: 68vw; } }
@media (max-width: 880px) {
  .modal-caixa.modal-sm, .modal-caixa.modal-md, .modal-caixa.modal-lg, .modal-caixa.modal-confirm { width: 96vw; max-height: 92vh; }
}
@keyframes modalSobe { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
.modal-cab { padding: 18px 22px; border-bottom: 1px solid var(--borda); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-cab h3 { font-family: var(--font-titulo); font-size: 17px; margin: 0; }
.modal-x { background: none; border: none; cursor: pointer; font-size: 22px; color: var(--texto-fraco); display: grid; place-items: center; padding: 0; }
.modal-x:hover { color: var(--texto); }
.modal-corpo { padding: 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.modal-rodape { padding: 16px 22px; border-top: 1px solid var(--borda); display: flex; gap: 10px; justify-content: flex-end; }
.modal-confirm .modal-rodape { justify-content: center; border-top: 0; }
.confirm-corpo { padding: 28px 28px 8px; }
.confirm-corpo h3 { font-family: var(--font-titulo); font-size: 18px; margin: 0 0 8px; }
.confirm-corpo p { color: var(--texto-suave); font-size: 14px; line-height: 1.5; margin: 0; }
.confirm-icone { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; }
.confirm-icone i { font-size: 34px; }
.confirm-icone.confirm-perigo { background: var(--erro-suave); color: var(--erro); }
.confirm-icone.confirm-aviso { background: var(--alerta-suave); color: var(--alerta); }
.campo-invalido input, .campo-invalido .sb-display, input.campo-invalido { border-color: var(--erro); }
.campo-erro { font-size: 12.5px; color: var(--erro); }
.campo-ajuda { font-size: 12.5px; color: var(--texto-fraco); }
.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grade .inteiro { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grade { grid-template-columns: 1fr; } }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-fantasma.btn-sm { padding: 0 8px; }
.btn-bloco { width: 100%; }
.icon { font-size: 16px; }

.ra-bar {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 18px;
}
.campo { display: flex; flex-direction: column; gap: 5px; }
/* Botão numa linha de campos (Padrao_Formulario): o label   alinha o botão com os inputs; no celular empilha e o rótulo vazio some. */
.campo.ra-acao { flex: 0 0 auto; }
@media (max-width: 640px) { .campo.ra-acao > label { display: none; } }
.campo label { font-size: 13px; font-weight: 600; color: var(--texto); }
.campo label.opcao { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.campo label.opcao input { width: auto; height: auto; min-height: 0; padding: 0; margin: 3px 0 0; flex: none; }
.campo label.opcao input[type="checkbox"], .campo label.opcao input[type="radio"] { width: 16px; height: 16px; accent-color: var(--cor-primaria); }
.campo input, .campo select, .campo textarea {
  height: var(--controle-h);
  box-sizing: border-box;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 0 12px;
  background: var(--superficie);
  color: var(--texto);
}
.campo textarea { height: auto; min-height: 90px; padding: 10px 12px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-soft);
}

.aviso {
  border-radius: var(--raio-sm);
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid transparent;
}
.aviso-erro { background: var(--erro-suave); color: var(--erro); border-color: var(--erro-suave); }
.aviso-sucesso { background: var(--sucesso-suave); color: var(--sucesso); }
.aviso-alerta { background: var(--alerta-suave); color: var(--alerta); }
.aviso-message, .aviso-info { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }

/* Tela de login */
.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(160deg, var(--cor-primaria-suave), var(--fundo) 55%);
}

/* Rodapé da empresa (todas as telas e login): discreto, não compete com o conteúdo */
.rodape-empresa {
  margin-top: auto;
  padding: 12px 24px 16px;
  display: flex;                          /* logo e texto juntos, o bloco todo no centro */
  justify-content: center;
  align-items: center;
  gap: 16px;
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cor-primaria-texto);   /* rosa da marca: contraste ~4,8:1 sobre o fundo, passa no mínimo de leitura */
  border-top: 1px solid var(--cor-primaria-suave);
}
.rodape-empresa .sem-quebra { white-space: nowrap; }   /* no celular "CNPJ:" não se separa do número */
/* Linha fina rosa entre o logo e o texto */
.rodape-textos { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; border-left: 1px solid var(--cor-primaria-suave); }
/* Logo real (rosa + cinza, como no menu), pequeno: da altura das duas linhas. No Resumo o rodapé do relatório segue apagado. */
.rodape-logo { line-height: 1; text-align: left; }
.rodape-logo .logo-nome { font-size: 20px; }
.rodape-logo .logo-sub { font-size: 11px; }
.tela-login .rodape-empresa { margin-top: 16px; padding: 0; border-top: 0; text-align: center; }   /* respiro do cartão */
.tela-login .rodape-logo { display: none; }   /* no login o logo já está no cartão */
.tela-login .rodape-textos { padding-left: 0; border-left: 0; }
@media (max-width: 760px) {
  .rodape-empresa { flex-direction: column; text-align: center; padding: 12px 16px 16px; }
  .rodape-textos { padding-left: 0; border-left: 0; }
}
@media print { .rodape-empresa { display: none; } }
.login-caixa {
  width: 100%;
  max-width: 380px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 10px 30px var(--cor-primaria-sombra);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Login em tela cheia: painel da marca à esquerda (cor sólida, linhas emaranhadas que viram uma reta),
   formulário e rodapé à direita. Sem cartão flutuante: a tela inteira é ocupada. */
.tela-login:has(.login-split) { display: block; padding: 0; background: var(--superficie); }
.login-split { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
/* Logo e formulário juntos num bloco só, no meio da altura (na linha da reta do painel); branco igual em cima e embaixo;
   rodapé colado no pé. Logo longe do formulário parecia solto (testado e recusado em 04/10) */
.login-lado { display: grid; grid-template-rows: 1fr auto auto 1fr auto; justify-items: center; padding: 24px 24px 20px; }
.login-lado .login-marca { grid-row: 2; }
.login-lado .login-caixa { grid-row: 3; }
.login-lado .rodape-empresa { grid-row: 5; }
.login-lado .login-caixa { max-width: 400px; margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.login-lado .rodape-empresa { margin-top: 0; }
/* Logo maior na tela cheia, para não ficar pequeno ao lado do título do painel */
.login-lado .login-marca { margin: 0 0 40px; }
.login-lado .login-marca .logo-nome { font-size: clamp(40px, 3.6vw, 56px); }
.login-lado .login-marca .logo-sub { font-size: clamp(14px, 1.1vw, 17px); }
/* Marca "pingo vivo" (aprovada 04/10): painel com bagunça de fundo, fios que formam o nome (login_vivo.js).
   Estado final = sem a classe .vivo (é o que vê quem desliga animação, tela estreita ou sem JS). */
.login-split {   /* painel escuro (04/10): o rosa cheio cansava a vista; preto + rosa como a FIAP e o cartão */
  --login-painel-fundo: var(--preto-marca);
  --login-painel-texto: var(--texto-sobre-cor-primaria);
  --login-fio-painel: var(--cor-primaria);   /* cor dos fios enquanto estão sobre o painel: já nascem rosa */
}
.login-painel { position: relative; min-height: 540px; background: var(--login-painel-fundo); color: var(--login-painel-texto); overflow: hidden; }
.login-fundo { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); fill: none;
  stroke: rgba(255, 255, 255, .10); stroke-width: 1.2; opacity: .4; animation: login-deriva 14s ease-in-out infinite alternate; }
.vivo .login-fundo { opacity: 1; }
@keyframes login-deriva { to { transform: translate(18px, -12px); } }
.login-fios { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1; fill: none; stroke-linecap: round; }
.login-fios .no-rosa path { stroke: var(--login-fio-painel); }
.login-fios .no-branco path { stroke: var(--cor-primaria); }
.login-lado { position: relative; z-index: 2; }
.login-marca:has(.logo-vivo) { cursor: pointer; user-select: none; }
.logo-vivo .i { position: relative; display: inline-block; }
.logo-vivo .pingo { position: absolute; left: calc(50% + .035em); top: .05em; width: .2em; height: .2em; margin-left: -.1em; border-radius: 50%; background: var(--cor-primaria); }
.logo-vivo .aceso .pingo { background: var(--preto-marca); }   /* o pingo aceso é preto (a decisão); cinza foi testado e recusado */
.vivo .logo-vivo .pingo { transform: scale(0); }
.vivo .logo-vivo .logo-nome { clip-path: inset(-40% 100% -40% 0); }
.vivo .logo-vivo .logo-sub { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .login-fundo { animation: none; } }
/* título e frase no meio da altura, alinhados à esquerda, crescendo com a tela; já estão lá ao abrir (os fios desviam) */
.login-painel-texto { position: absolute; left: clamp(40px, 6vw, 120px); right: clamp(40px, 6vw, 120px); top: 50%; transform: translateY(-50%); }
.login-painel-titulo { margin: 0; font-family: var(--font-titulo); font-size: clamp(40px, 3.8vw, 84px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; max-width: 11em; }
.login-painel-frase { margin: .9em 0 0; font-size: clamp(17px, 1.25vw, 26px); line-height: 1.5; opacity: .92; }
@media (max-width: 760px) {
  .login-split { grid-template-columns: 1fr; min-height: 0; }
  .login-painel { min-height: 290px; }
  .login-fios { display: none; }
  .login-painel-texto { left: 20px; right: 20px; top: auto; bottom: 20px; transform: none; }
  .login-painel-titulo { font-size: 24px; }
  .login-painel-frase { font-size: 14px; }
  .login-lado { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 28px 16px 16px; }
  .login-lado .login-marca { margin: 0; }
}
.login-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.login-marca .marca-icone {
  width: 40px; height: 40px; border-radius: var(--raio-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
  color: var(--texto-sobre-cor-primaria); font-size: 20px;
}
.login-marca .marca-textos { display: flex; flex-direction: column; line-height: 1.2; }
.login-marca .marca-nome { font-family: var(--font-titulo); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
.login-marca .marca-sub { font-size: 12px; color: var(--texto-fraco); }

/* Marca Simplifica Processos (sidebar e login) */
.logo-simplifica { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.logo-nome {
  font-family: var(--font-titulo);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.05em;
  color: var(--cor-primaria);
}
.logo-sub { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--texto-fraco); margin-top: 1px; }
.login-marca .logo-nome { font-size: 30px; }
.login-marca { justify-content: center; text-align: center; }
.login-marca .marca-textos { align-items: center; }
.logo-cliente { height: 56px; width: auto; border-radius: var(--raio-sm); flex-shrink: 0; }
.marca-textos .marca-sub { margin-top: 8px; }
.form-login { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }

/* Leia-me */
.leiame h2 { margin-top: 18px; }
.leiame h2:first-child { margin-top: 0; }
.leiame ol { margin: 0 0 10px; padding-left: 20px; }

/* Frases prontas da observação (Conferência por franqueado) */
.frases-prontas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.frases-prontas .btn-frase { font-size: 13px; padding: 6px 12px; }

/* Padrao_KPI_Dashboard: só na Visão geral do admin (listagem nunca tem KPI). */
.mg-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 1300px) { .mg-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .mg-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.mg-kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; position: relative;
  overflow: hidden; display: flex; align-items: center; gap: 12px; }
.mg-kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #cbd5e1; }
.mg-kpi.ac-marca::before { background: var(--cor-primaria); }   /* rosa do logo, liso (usuária, 16/10) */
.mg-kpi.ac-imp::before { background: linear-gradient(90deg, #94a3b8, #64748b); }
.mg-kpi.pos::before { background: linear-gradient(90deg, #22c55e, #16a34a); }
.mg-kpi.neg::before { background: linear-gradient(90deg, #f87171, #dc2626); }
.mg-kpi .ico { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
.mg-kpi.ac-marca .ico { background: var(--cor-primaria-suave); color: var(--cor-primaria); }
.mg-kpi.ac-imp .ico { background: #f1f5f9; color: #64748b; }
.mg-kpi.pos .ico { background: #bbf7d0; color: #15803d; }
.mg-kpi.neg .ico { background: #fecaca; color: #b91c1c; }
.mg-kpi .corpo { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mg-kpi .lbl { font-size: 10.5px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; font-weight: 700;
  line-height: 1.2; min-height: 25px; display: flex; align-items: flex-end; }
.mg-kpi .val { font-size: 20px; font-weight: 800; letter-spacing: -.5px; line-height: 1; font-variant-numeric: tabular-nums; margin-top: 3px; }
.mg-kpi .disc { font-size: 10.5px; color: var(--texto-fraco); margin-top: 4px; line-height: 1.2; font-style: italic; min-height: 14px; }
.mg-kpi.pos { background: #f0fdf4; border-color: #bbf7d0; }
.mg-kpi.pos .lbl, .mg-kpi.pos .val { color: #15803d; }
.mg-kpi.neg { background: #fef2f2; border-color: #fecaca; }
.mg-kpi.neg .lbl, .mg-kpi.neg .val { color: #b91c1c; }
@media (max-width: 720px) {
  .mg-kpi { padding: 12px 11px; gap: 9px; }
  .mg-kpi .ico { width: 36px; height: 36px; font-size: 18px; border-radius: 9px; }
  .mg-kpi .val { font-size: 18px; }
}

/* Padrao_Tabs: abas do admin, sublinhado na cor da marca, sem fundo. */
.adm-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--borda); margin-bottom: 16px; }
.adm-tab { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--texto-suave); cursor: pointer; border: none;
  background: transparent; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.adm-tab:hover { color: var(--texto); }
.adm-tab.ativo { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }
.adm-pane { display: none; }
.adm-pane.ativo { display: block; }

/* Telas do admin */
.pilha { display: flex; flex-direction: column; gap: 16px; }
.card-titulo { font-family: var(--font-titulo); font-size: 16px; margin: 0 0 4px; }
.card-sub { margin: 0 0 16px; color: var(--texto-suave); font-size: 13.5px; }
.form-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.matriz { width: 100%; border-collapse: collapse; }
.matriz th, .matriz td { padding: 9px 12px; border-bottom: 1px solid var(--borda); text-align: left; font-size: 14px; }
.matriz th { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
.matriz .col-check { width: 90px; text-align: center; }
.matriz input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--cor-primaria); }
.matriz-grupo td { background: var(--fundo); font-weight: 700; }
.matriz-grupo .grupo-ferramentas { display: flex; flex-wrap: wrap; gap: 14px; font-weight: 400; font-size: 13px; color: var(--texto-suave); }
.matriz-grupo label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.matriz-modulo i { color: var(--texto-suave); margin-right: 6px; }
.barra-global { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.so-leitura { opacity: .55; pointer-events: none; }
.tb-acoes .btn-icone.desabilitado, .tb-acoes span.desabilitado { opacity: .45; cursor: not-allowed; }
.lista-ip { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lista-ip li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm); }
.lista-ip ul { list-style: none; margin: 0; padding: 0; }
.identidade-amostra { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.amostra-cor { width: 40px; height: 40px; border-radius: var(--raio-sm); background: var(--cor-primaria); border: 1px solid var(--borda); }
.login-titulo { font-family: var(--font-titulo); font-size: 22px; margin: 0 0 4px; }
.btn.desabilitado { opacity: .45; cursor: not-allowed; }
.aviso-pagina:not(:empty) { margin-bottom: 14px; }
.tb-acoes { display: flex; gap: 10px; align-items: center; }
[hidden] { display: none !important; }   /* .campo{display:flex} não pode vencer o atributo hidden */

/* Padrao_Toggle_OnOff: liga/desliga que grava na hora. Checkbox real escondido + label clicável, 42x24, verde ligado. */
.cv-sw { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; vertical-align: middle; }
.cv-sw input { display: none; }
.cv-sw label { position: absolute; inset: 0; background: var(--borda); border-radius: 999px; cursor: pointer; transition: .15s; }
.cv-sw label::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff;
                      border-radius: 50%; transition: .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.cv-sw input:checked + label { background: #16a34a; }
.cv-sw input:checked + label::after { transform: translateX(18px); }
.cv-sw input:focus-visible + label { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.cv-sw.travado label { cursor: not-allowed; opacity: .5; }
.cv-sw.gravando label { opacity: .6; pointer-events: none; }

/* Início: atalhos de cada loja para as etapas do último mês importado */
.inicio-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.inicio-acoes .btn-secundario { display: inline-flex; align-items: center; gap: 6px; }