:root{--navy:#0b172a;--blue:#3157d5;--cyan:#28c3d8;--ink:#19243a;--muted:#667085;--line:#e5e9f2;--bg:#f4f7fb;--ok:#16845b;--warn:#c47708;--danger:#c83c4d;--white:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}.shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.sidebar{background:var(--navy);color:#dce5f5;padding:28px 20px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;color:#fff}.mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,var(--cyan),var(--blue));display:grid;place-items:center}.mark:after{content:"F";font-weight:900}.caption{font-size:12px;color:#8fa3c4;margin:7px 0 30px 50px}.nav button{display:block;width:100%;border:0;background:transparent;color:#b8c5dc;text-align:left;padding:12px 14px;border-radius:10px;margin:4px 0}.nav button:hover,.nav button.active{background:#192b49;color:#fff}.main{padding:28px 34px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.top h1{margin:0;font-size:26px}.muted{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 6px 22px rgba(31,50,90,.05)}.metric strong{display:block;font-size:28px;margin-top:8px}.panel{margin-top:18px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.panel h2{font-size:18px;margin:0}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);font-size:14px}.table th{color:var(--muted);font-weight:600}.badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#e9f7f1;color:var(--ok);font-size:12px;font-weight:700}.badge.pending{background:#fff4df;color:var(--warn)}.button{border:0;background:var(--blue);color:#fff;border-radius:10px;padding:10px 14px;font-weight:700}.button.secondary{background:#edf1fa;color:var(--ink)}.button.danger{background:#ffecef;color:var(--danger)}.form{display:grid;gap:12px}.form.two{grid-template-columns:1fr 1fr}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;border:1px solid #ccd4e2;border-radius:10px;padding:11px 12px;background:#fff}.login-page{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#fff}.login-art{background:radial-gradient(circle at 20% 20%,#3157d5,#0b172a 68%);color:white;padding:9vw 8vw}.login-art h1{font-size:48px;line-height:1.08;margin:25px 0 15px;max-width:580px}.login-box{display:grid;place-items:center;padding:35px}.login-card{width:min(430px,100%)}.login-card h2{font-size:28px;margin-bottom:8px}.error{color:var(--danger);min-height:24px;font-size:14px}.hidden{display:none!important}.form-message{min-height:20px;font-size:14px;font-weight:600}.form-message.error{color:var(--danger)}.form-message.success{color:var(--ok)}.environment-banner{background:var(--warn);color:#fff;font-weight:800;font-size:13px;letter-spacing:.06em;text-align:center;padding:11px 14px}body.has-environment-banner .shell,body.has-environment-banner .login-page{min-height:calc(100vh - 40px)}.catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.price{font-size:25px;font-weight:800;margin:15px 0}.empty{padding:25px;text-align:center;color:var(--muted)}@media(max-width:900px){.shell{grid-template-columns:minmax(0,1fr)}.sidebar{display:none}.main{padding:20px}.grid,.catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.login-page{grid-template-columns:minmax(0,1fr)}.login-art{display:none}}@media(max-width:560px){.grid,.catalog,.form.two{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   Catalogo governado — subetapa 1.5
   ========================================================================== */

/* Status em PT-BR. O verde ja e o .badge padrao (ativo). */
.badge.success{background:#e9f7f1;color:var(--ok)}
.badge.muted{background:#eef1f6;color:var(--muted)}
.badge.danger{background:#ffecef;color:var(--danger)}

/* Grades de formulario. Todas colapsam para coluna unica no celular. */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}

/* Tabela larga (versoes de preco tem 8 colunas) rola SOZINHA, sem empurrar a
   pagina inteira para o lado. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll .table{min-width:640px}

.filters{display:grid;grid-template-columns:200px 1fr auto;gap:12px;align-items:end}

/* ------------------------------------------------ conter a largura no celular

   Item de grade/flex nasce com `min-width:auto`, que resolve para o min-content
   do conteudo. Cabecalho longo, menu com 12 botoes ou tabela de 640px viravam
   um piso de largura que a trilha era obrigada a respeitar — e o excesso saia
   pela direita da viewport. Zerar esse piso e o que faz `overflow-x:auto` do
   .table-scroll e do .nav realmente rolarem por dentro, em vez de empurrar a
   pagina. Nao ha `overflow:hidden` aqui de proposito: esconder o estouro
   cortaria conteudo, que e justamente o defeito relatado no retrato. */
.shell>*,.split>*,.grid>*,.grid-2>*,.grid-3>*,.grid-4>*,.catalog>*{min-width:0}
.card{min-width:0}
.sidebar,.main{min-width:0}
.top>div{min-width:0}

/* Texto sem espaco (e-mail, slug, hash, URL de convite) nao tem onde quebrar e
   estica a caixa inteira. `anywhere` permite a quebra so quando falta espaco. */
.muted,.audit-value,.modal-body,.table td,.table th{overflow-wrap:anywhere}

/* Campo e botao nunca passam da largura disponivel, mesmo com rotulo longo. */
.field input,.field select,.field textarea,.button,select,input,textarea{max-width:100%}

/* Painel de duas colunas: formulario a esquerda, lista a direita.
   A largura da coluna do formulario morava em style="" no proprio HTML — e
   estilo inline VENCE media query, por especificidade. O resultado e que a
   coluna de 420px sobrevivia num aparelho de 390px e empurrava a pagina
   inteira para o lado. Trazendo a largura para o CSS, a media query volta a
   alcancar. O minmax(0,...) impede que conteudo largo (tabela, e-mail comprido)
   estufe a coluna alem da fracao. */
.split{display:grid;gap:16px;grid-template-columns:minmax(0,360px) minmax(0,1fr)}
.split.narrow{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
.split.wide{grid-template-columns:minmax(0,420px) minmax(0,1fr)}
.split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:900px){
  .split,.split.narrow,.split.wide,.split.even{grid-template-columns:minmax(0,1fr)}
}

.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:18px 0 16px}
.tab{border:0;background:transparent;color:var(--muted);font-weight:700;padding:10px 14px;border-bottom:3px solid transparent;border-radius:8px 8px 0 0}
.tab:hover{background:#f6f8fc;color:var(--ink)}
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.aba{padding:4px 0 8px}

.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.right{text-align:right}

/* Aviso de impacto: aparece antes de publicar, inativar e descontinuar. */
.notice{background:#f2f6ff;border-left:4px solid var(--blue);border-radius:8px;padding:12px 14px;font-size:14px;line-height:1.5;margin:12px 0}

.form.bordered{border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px;background:#fbfcfe}
.form.bordered h3{margin:0 0 6px;font-size:16px}

.req{color:var(--danger)}
.check{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600}
.check input{width:auto}

.limits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.limit{background:#f6f8fc;border-radius:10px;padding:10px 12px}
.limit span{display:block;font-size:12px}
.limit strong{font-size:15px}
.limits-fieldset{border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.limits-fieldset legend{font-size:13px;font-weight:700;padding:0 6px;color:var(--muted)}

/* Auditoria antes/depois. O <pre> rola sozinho: metadata longa nao pode
   esticar a largura da pagina. */
.audit{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:#fff}
.audit summary{cursor:pointer;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.audit pre{background:#f6f8fc;border-radius:8px;padding:10px;overflow-x:auto;font-size:12px;margin:6px 0 0;max-height:260px}

/* --------------------------------------------------------------- celular */

@media(max-width:900px){
  /* A regra anterior escondia a sidebar por completo abaixo de 900px, o que
     deixava o painel SEM navegacao nenhuma no celular. Aqui ela volta como
     barra horizontal rolavel no topo.

     `minmax(0,1fr)` e nao `1fr`: em grade, `1fr` significa `minmax(auto,1fr)`, e
     esse `auto` vira o min-content dos itens. Com os 12 botoes do menu em
     nowrap, o min-content da sidebar era 1692px — a trilha inteira crescia para
     1692px num aparelho de 360px, e a pagina passava a rolar na horizontal.
     Medido em retrato: html.scrollWidth=1692 com clientWidth=360. */
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{display:block;padding:14px 12px}
  .sidebar-logo{height:30px}
  .caption{display:none}
  .nav{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .nav button{flex:0 0 auto;width:auto;margin:0;white-space:nowrap;font-size:14px;padding:9px 12px}
  .top{flex-wrap:wrap;gap:10px}
  .filters{grid-template-columns:1fr}
  .grid-4,.limits{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:560px){
  .grid-2,.grid-3,.grid-4,.limits{grid-template-columns:minmax(0,1fr)}
  .panel-head{flex-direction:column;align-items:flex-start;gap:10px}
  .panel-head .right{text-align:left}
  .actions .button{flex:1 1 auto}
  .main{padding:16px}
}

/* ------------------------------- histórico de auditoria legível (melhoria 1.5) */
.audit-head{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;justify-content:space-between}
.audit-reason{margin:8px 0 0;font-size:14px}
.audit-fields{margin-top:10px;display:grid;gap:6px}
.audit-hint{font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.audit-field{display:grid;grid-template-columns:200px 1fr;gap:10px;align-items:baseline;
  background:#f9fafd;border-radius:8px;padding:8px 10px}
.audit-label{font-size:13px;font-weight:700;color:var(--muted)}
.audit-value{font-size:14px}
.audit-change{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;font-size:14px}
.audit-before{color:var(--muted);text-decoration:line-through}
.audit-arrow{color:var(--blue);font-weight:700}
.audit-after{font-weight:600}
.audit-tech{margin-top:10px}
.audit-tech summary{font-size:13px;color:var(--muted);cursor:pointer}
.audit-tech dl{display:grid;grid-template-columns:130px 1fr;gap:4px 10px;font-size:13px;margin:10px 0}
.audit-tech dt{color:var(--muted);font-weight:700}
.audit-tech dd{margin:0;word-break:break-all}

@media(max-width:560px){
  .audit-field{grid-template-columns:1fr;gap:2px}
  .audit-tech dl{grid-template-columns:1fr}
}

/* Confirmação que sobrevive ao redesenho da tela (item 6 / feedback de ação). */
.flash{border-left:4px solid var(--ok);background:#e9f7f1;color:#0f5c40;font-weight:600;margin-bottom:14px}
.flash.error{border-left-color:var(--danger);background:#ffecef;color:var(--danger)}

/* RQ-B2-01 — selo de versao, discreto e fora do caminho do conteudo. Nao usa
   position:fixed no celular para nao cobrir acao na parte de baixo da tela. */
.orion-version{position:fixed;right:10px;bottom:8px;z-index:900;
  font-size:11px;letter-spacing:.02em;color:var(--muted);background:rgba(255,255,255,.86);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;pointer-events:none}
@media(max-width:560px){
  .orion-version{position:static;display:block;text-align:center;margin:14px auto 10px;
    background:transparent;border:0;padding:0}
}

/* ---------------------------- diálogo ORION (substitui alert/prompt/confirm) */
.modal-backdrop{position:fixed;inset:0;background:rgba(11,23,42,.55);display:grid;place-items:center;
  padding:20px;z-index:1000;overflow-y:auto}
.modal{background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(11,23,42,.28);
  width:min(560px,100%);max-height:calc(100vh - 40px);overflow-y:auto}
.modal-form{display:grid;gap:14px;padding:22px}
.modal h2{margin:0;font-size:20px}
.modal-body{font-size:14px;line-height:1.5}
.modal-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-actions{justify-content:flex-end}
.modal-resumo{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;margin:0}
.modal-resumo dt{color:var(--muted);font-weight:700}
.modal-resumo dd{margin:0;font-weight:600}
.modal .form-message ul{margin:6px 0 0;padding-left:18px;font-weight:500}
.modal .form-message li{margin-bottom:3px}

/* Estados padronizados das faixas: informação, sucesso, alerta e erro.
   `error` e `erro` convivem porque as telas antigas usam a forma em inglês. */
.flash.success{border-left-color:var(--ok);background:#e9f7f1;color:#0f5c40}
.flash.info{border-left-color:var(--blue);background:#f2f6ff;color:#1c3a8a}
.flash.alerta{border-left-color:var(--warn);background:#fff4df;color:#7a4b04}
.flash.erro{border-left-color:var(--danger);background:#ffecef;color:var(--danger)}

@media(max-width:560px){
  .modal-backdrop{padding:0;place-items:stretch}
  .modal{width:100%;max-height:100vh;border-radius:0}
  .modal-fields{grid-template-columns:1fr}
  .modal-actions{flex-direction:column-reverse}
  .modal-actions .button{width:100%}
}

/* Declaração explícita de aceite: o confirmar só habilita depois de marcada. */
.check.declaracao{align-items:flex-start;gap:10px;background:#f6f8fc;border-radius:10px;padding:12px;line-height:1.45}
.check.declaracao input{margin-top:3px}
.modal .button[disabled]{opacity:.5;cursor:not-allowed}
.modal-resumo code{font-size:12px;background:#f6f8fc;padding:2px 6px;border-radius:6px}

/* ---------------------------------------------- cancelamento contratual (2.5)
 * Hierarquia visual do pedido em andamento: a DATA EFETIVA e a informacao que o
 * cliente volta na tela para conferir, entao ela e a unica em destaque. O resto
 * fica legivel sem competir com ela.
 *
 * min-width:0 nas celulas porque grid item nasce com min-width:auto e um texto
 * longo empurraria o cartao para fora da viewport no celular — a mesma correcao
 * aplicada as telas do Bloco 1.
 */
.cancel-box{border:1px solid var(--line);border-left:4px solid var(--warn);
  border-radius:12px;padding:16px;margin:16px 0;background:#fffaf0}
.cancel-head{margin:0 0 12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--warn)}
.cancel-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px 24px;margin:0}
.cancel-dl>div{min-width:0}
.cancel-dl dt{font-size:13px;color:var(--muted);margin:0;font-weight:600}
.cancel-dl dd{margin:3px 0 0;font-weight:700;overflow-wrap:anywhere}
.cancel-destaque dd{font-size:20px;line-height:1.3;color:var(--ink)}
.cancel-nota{margin:12px 0 0;font-size:14px;overflow-wrap:anywhere}
.cancel-previa{margin:8px 0 0;font-size:14px;overflow-wrap:anywhere}