/* =====================================================================
   CHAMADOS ABCM · identidade visual alinhada ao novo site da ABCM
   Logo: coloque o arquivo em assets/logo.svg (ou .png).
   ===================================================================== */
:root {
  /* ---- MARCA ABCM ---- */
  --navy:        #141242;  /* azul-marinho principal */
  --navy-2:      #2e2c5f;
  --royal:       #384ea9;  /* azul royal (botões) */
  --royal-hover: #2c3f8f;
  --violeta:     #332ea8;
  --ciano:       #2bbcfa;  /* destaque */
  --ciano-claro: #e6f7ff;
  --noite:       #0b0d2b;  /* rodapé */
  --grad:        linear-gradient(135deg, var(--ciano), var(--royal));
  --grad-faixa:  linear-gradient(90deg, var(--navy), var(--violeta) 60%, var(--ciano));
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* ---- Neutros ---- */
  --fundo:  #f6f7fc;
  --cartao: #ffffff;
  --texto:  #111827;
  --sutil:  #6b7280;
  --linha:  #e5e7eb;

  /* ---- Status ---- */
  --aberto:    #384ea9; --aberto-bg:    #eceffc;
  --andamento: #b45309; --andamento-bg: #fef3e2;
  --concluido: #15803d; --concluido-bg: #e7f6ec;
  --urgente:   #dc2626; --urgente-bg:   #fdecec;

  --raio: 14px;
  --raio-sm: 8px;
  --sombra: 0 1px 2px rgba(20,18,66,.04), 0 4px 16px rgba(20,18,66,.06);
  --sombra-forte: 0 12px 32px rgba(20,18,66,.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--fonte); font-size: 15px; line-height: 1.5;
  color: var(--texto); background: var(--fundo);
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--royal); }
h1 { font-size: 24px; line-height: 1.2; margin: 0 0 6px; letter-spacing: -.02em; color: var(--navy); }
em { font-style: normal; }
.sutil { color: var(--sutil); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Topo ---------- */
.faixa { height: 4px; background: var(--grad-faixa); }
.barra { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 10; }
.barra-in { max-width: 1140px; margin: 0 auto; padding: 0 20px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--navy); }
.marca-logo { height: 40px; width: auto; display: block; }
.marca-sigla { position: relative; font-weight: 800; font-size: 24px; letter-spacing: .02em; color: var(--navy); line-height: 1; }
.marca-sigla i { position: absolute; right: -9px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ciano); }
.marca-sigla.grande { font-size: 34px; }
.marca-sigla.grande i { width: 9px; height: 9px; right: -12px; }
.marca-sep { width: 1px; height: 28px; background: var(--linha); }
.marca-nome { font-size: 12px; line-height: 1.2; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--sutil); }
.barra-acoes { display: flex; align-items: center; gap: 12px; }

.menu-user { position: relative; }
.menu-user summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 99px; border: 1px solid transparent; }
.menu-user summary::-webkit-details-marker { display: none; }
.menu-user summary:hover, .menu-user[open] summary { border-color: var(--linha); background: #fff; }
.menu-nome { font-weight: 500; font-size: 14px; }
.seta { width: 7px; height: 7px; border-right: 1.5px solid var(--sutil); border-bottom: 1.5px solid var(--sutil); transform: rotate(45deg) translateY(-2px); }
.menu-pop { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; color: var(--texto); border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra-forte); min-width: 210px; padding: 6px; }
.menu-pop a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--texto); text-decoration: none; font-size: 14px; }
.menu-pop a:hover { background: var(--fundo); color: var(--royal); }
.menu-info { padding: 10px 12px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; display: flex; flex-direction: column; }
.menu-info small { color: var(--sutil); }

.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }
.avatar-sm { width: 28px; height: 28px; font-size: 12px; }

/* ---------- Estrutura ---------- */
.conteudo { flex: 1; width: 100%; max-width: 1140px; margin: 0 auto; padding: 28px 20px 90px; }
.conteudo-solto { flex: 1; width: 100%; display: flex; flex-direction: column; }
.rodape { background: var(--noite); color: rgba(255,255,255,.55); font-size: 12px; }
.rodape-in { max-width: 1140px; margin: 0 auto; padding: 18px 20px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rodape strong { color: var(--ciano); font-weight: 600; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 24px; margin-bottom: 16px; }
.voltar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; text-decoration: none; color: var(--sutil); font-size: 14px; font-weight: 500; }
.voltar:hover { color: var(--royal); }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: var(--raio-sm); padding: 11px 18px; font: 600 14px/1.2 var(--fonte); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--royal); color: #fff; box-shadow: 0 4px 12px rgba(56,78,169,.25); }
.btn-primario:hover { background: var(--royal-hover); }
.btn-ciano { background: var(--ciano); color: var(--navy); box-shadow: 0 6px 18px rgba(43,188,250,.35); }
.btn-ciano:hover { background: #5ccbfb; }
.btn-claro { background: #fff; color: var(--navy); border-color: rgba(20,18,66,.18); }
.btn-claro:hover { border-color: var(--royal); color: var(--royal); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-bloco { width: 100%; padding: 13px 18px; }
.link-perigo { background: none; border: 0; color: var(--urgente); font: 500 13px var(--fonte); cursor: pointer; padding: 6px 2px; }
.link-perigo:hover { text-decoration: underline; }

/* ---------- Avisos ---------- */
.aviso { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; border: 1px solid; }
.aviso-ok   { background: var(--concluido-bg); color: var(--concluido); border-color: #bfe3cc; }
.aviso-erro { background: var(--urgente-bg); color: var(--urgente); border-color: #f5c2c2; }
.aviso-info { background: var(--andamento-bg); color: var(--andamento); border-color: #f3d9a8; }

/* ---------- Formulários ---------- */
.form { display: flex; flex-direction: column; gap: 18px; }
.form label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--navy-2); }
.form label small { font-weight: 400; }
input, select, textarea { font: 400 15px/1.4 var(--fonte); color: var(--texto); background: #fff; border: 1px solid #d5d9e2; border-radius: 10px; padding: 11px 13px; width: 100%; transition: border-color .15s, box-shadow .15s; }
textarea { resize: vertical; min-height: 110px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ciano); box-shadow: 0 0 0 4px rgba(43,188,250,.18); }
input[type=file] { padding: 12px; background: var(--fundo); border-style: dashed; cursor: pointer; }
.form-cartao { max-width: 780px; }
.form-cartao.estreito { max-width: 500px; }
.form-acoes { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grade-3 { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 18px; align-items: start; }

.seg { border: 0; padding: 0; margin: 0; min-width: 0; }
.seg legend { font-size: 13px; font-weight: 600; color: var(--navy-2); padding: 0; margin-bottom: 7px; }
.seg-opcoes { display: flex; gap: 4px; padding: 4px; background: #eef0f6; border-radius: 10px; }
.form .seg-op { flex: 1; flex-direction: row; gap: 0; margin: 0; cursor: pointer; }
.seg-op input { position: absolute; opacity: 0; pointer-events: none; }
.seg-op span { flex: 1; text-align: center; padding: 8px 6px; font-weight: 500; font-size: 14px; color: var(--sutil); border-radius: 7px; transition: background .15s; }
.seg-op input:checked + span { background: #fff; color: var(--royal); font-weight: 600; box-shadow: 0 1px 3px rgba(20,18,66,.12); }
.seg-urgente input:checked + span { background: var(--urgente); color: #fff; }
.seg-op input:focus-visible + span { outline: 2px solid var(--ciano); outline-offset: 1px; }

/* ---------- Login ---------- */
.login-wrap { flex: 1; min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-arte { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 20% 10%, #2a3a9e 0%, var(--navy) 55%, var(--noite) 100%); color: #fff; display: flex; align-items: flex-end; padding: 56px; }
.rede { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.login-arte-txt { position: relative; max-width: 460px; }
.login-arte h2 { font-size: 38px; line-height: 1.12; letter-spacing: -.02em; margin: 14px 0 12px; }
.login-arte h2 em { color: var(--ciano); }
.login-arte p { color: rgba(255,255,255,.7); font-size: 16px; margin: 0; }
.hero-tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ciano); background: rgba(43,188,250,.12); border: 1px solid rgba(43,188,250,.3); padding: 5px 10px; border-radius: 99px; }
.login-lado { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: #fff; }
.login-card { width: 100%; max-width: 380px; }
.login-marca { margin-bottom: 28px; }
.login-marca img { height: 56px; }
.login-card h1 { font-size: 26px; }
.login-card .sutil { margin: 0 0 26px; }

.instalar { max-width: 980px; margin: 0 auto; padding: 36px 20px; }
.inst-linha { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr 1fr .9fr; gap: 12px; margin: 0; padding: 16px; }

/* ---------- Hero (início) ---------- */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 30px 34px; border-radius: 18px; color: #fff; margin-bottom: 18px;
  background: radial-gradient(90% 140% at 100% 0%, rgba(43,188,250,.35) 0%, transparent 55%), linear-gradient(120deg, var(--navy) 0%, #23207a 60%, var(--royal) 100%); box-shadow: var(--sombra-forte); }
.hero::after { content: ''; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 0 0 40px rgba(255,255,255,.03), 0 0 0 80px rgba(255,255,255,.02); pointer-events: none; }
.hero h1 { color: #fff; font-size: 30px; margin: 12px 0 6px; }
.hero h1 em { color: var(--ciano); }
.hero p { margin: 0; color: rgba(255,255,255,.75); }
.hero-btn { position: relative; z-index: 1; }

/* ---------- Resumo ---------- */
.resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.resumo-item { position: relative; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px 20px 18px 22px; text-decoration: none; color: var(--sutil); display: flex; flex-direction: column; font-size: 14px; font-weight: 500; transition: transform .15s, box-shadow .15s; overflow: hidden; }
.resumo-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.resumo-item:hover { transform: translateY(-2px); box-shadow: var(--sombra-forte); }
.resumo-num { font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--navy); letter-spacing: -.02em; }
.r-aberto::before { background: var(--royal); }
.r-andamento::before { background: #f59e0b; }
.r-concluido::before { background: #22c55e; }

/* ---------- Filtros ---------- */
.filtros { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.abas { display: flex; gap: 2px; background: #eceef6; padding: 4px; border-radius: 11px; overflow-x: auto; max-width: 100%; }
.aba { padding: 7px 13px; border-radius: 8px; text-decoration: none; color: var(--sutil); font-size: 14px; font-weight: 500; white-space: nowrap; }
.aba:hover { color: var(--navy); }
.aba.ativa { background: #fff; color: var(--navy); font-weight: 600; box-shadow: 0 1px 3px rgba(20,18,66,.1); }
.aba-n { font-size: 12px; color: var(--sutil); margin-left: 3px; }
.busca { display: flex; gap: 8px; flex: 1; max-width: 500px; min-width: 260px; }
.busca select { width: auto; flex: none; }
.busca input { flex: 1; padding-left: 38px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m14 14-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center; }

/* ---------- Lista ---------- */
.lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.item { position: relative; display: block; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 20px 16px 24px; text-decoration: none; color: var(--texto); box-shadow: var(--sombra); transition: transform .12s, box-shadow .15s, border-color .15s; overflow: hidden; }
.item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--royal); }
.item:hover { transform: translateY(-1px); box-shadow: var(--sombra-forte); border-color: #d5dbf2; }
.item.st-em_andamento::before { background: #f59e0b; }
.item.st-concluido::before { background: #22c55e; }
.item.st-concluido { opacity: .75; }
.item-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.item-num { font-size: 13px; font-weight: 700; color: var(--sutil); font-variant-numeric: tabular-nums; }
.item-cat { font-size: 12px; color: var(--royal); background: var(--aberto-bg); padding: 2px 9px; border-radius: 99px; margin-left: auto; font-weight: 500; }
.item-titulo { font-weight: 600; font-size: 16px; color: var(--navy); margin-bottom: 6px; }
.item-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--sutil); }
.atrasado { color: var(--urgente) !important; font-weight: 600; }

.selo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; }
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo-aberto { background: var(--aberto-bg); color: var(--aberto); }
.selo-em_andamento { background: var(--andamento-bg); color: var(--andamento); }
.selo-concluido { background: var(--concluido-bg); color: var(--concluido); }
.prio { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; }
.prio-urgente { background: var(--urgente); color: #fff; }
.prio-baixa { background: #eef0f4; color: var(--sutil); }

.vazio { text-align: center; padding: 60px 20px; background: #fff; border: 1px dashed #cfd4e2; border-radius: var(--raio); color: var(--sutil); }

/* ---------- Detalhe ---------- */
.detalhe { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.det-titulo { font-size: 26px; margin: 8px 0 4px; }
.det-por { color: var(--sutil); font-size: 14px; margin-bottom: 20px; }
.det-texto { font-size: 15px; line-height: 1.7; padding: 18px 20px; background: #f8f9ff; border: 1px solid #e3e7f7; border-radius: 12px; overflow-wrap: anywhere; }
.sec-titulo { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--sutil); margin: 30px 0 14px; font-weight: 700; }
.cartao > .sec-titulo:first-child { margin-top: 0; }
.lateral { position: sticky; top: 92px; }

.anexos { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.anexos a { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--linha); border-radius: 10px; text-decoration: none; color: var(--texto); background: #fff; max-width: 290px; font-size: 13px; transition: border-color .15s; }
.anexos a:hover { border-color: var(--ciano); }
.anexos img { width: 42px; height: 42px; object-fit: cover; border-radius: 7px; flex: none; }
.anexo-ic { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--fundo); border-radius: 7px; font-size: 18px; flex: none; }
.anexo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexos small { color: var(--sutil); flex: none; }

.tempo { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ev-msg { border: 1px solid var(--linha); border-radius: 12px; padding: 14px 18px; background: #fff; }
.ev-mg { background: linear-gradient(180deg, #f2f8ff, #eef4ff); border-color: #d4e3fb; }
.ev-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; margin-bottom: 8px; color: var(--navy); }
.ev-org { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sutil); }
.ev-mg .ev-org { color: var(--royal); }
.ev-cab time, .ev-status time { margin-left: auto; font-size: 12px; color: var(--sutil); }
.ev-texto { overflow-wrap: anywhere; line-height: 1.65; }
.ev-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--sutil); padding: 2px 6px; }
.ev-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ciano); box-shadow: 0 0 0 4px rgba(43,188,250,.15); flex: none; }

.responder { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linha); gap: 10px; }
.responder-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.responder-barra select { width: auto; flex: 1; min-width: 180px; }
.form .anexar { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; color: var(--sutil); padding: 10px 13px; border: 1px dashed #cfd4e2; border-radius: 10px; cursor: pointer; margin: 0; }
.anexar:hover { border-color: var(--ciano); color: var(--royal); }
.anexar input { display: none; }

.status-rapido { display: flex; flex-direction: column; gap: 6px; }
.st-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 13px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; font: 500 14px var(--fonte); color: var(--texto); cursor: pointer; transition: border-color .15s, background .15s; }
.st-btn:hover:not(:disabled) { border-color: var(--ciano); background: #fafcff; }
.st-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid; }
.st-btn-aberto .st-dot { border-color: var(--aberto); }
.st-btn-em_andamento .st-dot { border-color: #f59e0b; }
.st-btn-concluido .st-dot { border-color: #22c55e; }
.st-btn.atual { cursor: default; font-weight: 700; }
.st-btn-aberto.atual { background: var(--aberto-bg); border-color: var(--aberto); color: var(--aberto); }
.st-btn-em_andamento.atual { background: var(--andamento-bg); border-color: #f59e0b; color: var(--andamento); }
.st-btn-concluido.atual { background: var(--concluido-bg); border-color: #22c55e; color: var(--concluido); }
.st-btn.atual .st-dot { background: currentColor; border-color: currentColor; }

.dados { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; font-size: 14px; }
.dados dt { color: var(--sutil); }
.dados dd { margin: 0; text-align: right; font-weight: 600; color: var(--navy); white-space: nowrap; }

/* ---------- Tabela ---------- */
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--sutil); font-weight: 700; padding: 10px; border-bottom: 1px solid var(--linha); }
.tabela td { padding: 12px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr.inativo td { opacity: .5; }
.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; align-items: flex-start; }
.acoes-linha summary { list-style: none; }
.acoes-linha summary::-webkit-details-marker { display: none; }
.mini-form { display: flex; gap: 6px; margin-top: 6px; }
.mini-form input { padding: 7px 10px; font-size: 13px; width: 150px; }

/* ---------- Botão flutuante (celular) ---------- */
.fab { display: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .detalhe { grid-template-columns: 1fr; }
  .lateral { position: static; order: -1; }
  .inst-linha { grid-template-columns: 1fr 1fr; }
  .login-wrap { grid-template-columns: 1fr; }
  .login-arte { padding: 40px 24px 32px; min-height: 230px; }
  .login-arte h2 { font-size: 26px; }
  .login-lado { align-items: flex-start; padding-top: 32px; }
}
@media (max-width: 640px) {
  .conteudo { padding: 16px 16px 96px; }
  .so-desktop { display: none !important; }
  .barra-in { height: 60px; }
  .marca-logo { height: 32px; }
  .hero { padding: 22px; border-radius: 14px; }
  .hero h1 { font-size: 24px; }
  .hero-btn { display: none; }
  .resumo { gap: 8px; }
  .resumo-item { padding: 12px 12px 12px 16px; font-size: 12px; }
  .resumo-num { font-size: 24px; }
  .busca { min-width: 0; max-width: none; width: 100%; flex-direction: column; }
  .busca select { width: 100%; }
  .grade-2, .grade-3 { grid-template-columns: 1fr; }
  .cartao { padding: 18px; }
  .item-cat { margin-left: 0; }
  .det-titulo { font-size: 21px; }
  .fab { display: flex; position: fixed; right: 18px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 30px; font-weight: 300; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 10px 24px rgba(56,78,169,.45); z-index: 20; }
  .responder-barra .btn { flex: 1; }
  .acoes-linha { flex-direction: column; align-items: stretch; }
  .inst-linha { grid-template-columns: 1fr; }
  .rodape-in { justify-content: center; text-align: center; }
}