/* ============================================================
     REFINO VISUAL — acabamento profissional (rodada H)
     Apenas aparência: nenhuma regra abaixo altera comportamento.
     ============================================================ */
  :root{
    --sombra-xs:0 1px 2px rgba(8,60,44,.06);
    --sombra-sm:0 2px 8px rgba(8,60,44,.07);
    --sombra-md:0 10px 30px -12px rgba(8,60,44,.30);
    --sombra-lg:0 24px 60px -20px rgba(8,42,32,.45);
    --linha-suave:#e6efec;
    --fundo-campo:#fbfdfc;
    --radius:14px;
  }
  html{scroll-behavior:smooth;}
  body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    text-rendering:optimizeLegibility;letter-spacing:-.005em;}
  ::selection{background:rgba(18,135,106,.22);}
  button,input,select,textarea{font-family:inherit;}
  button{-webkit-tap-highlight-color:transparent;}
  :focus-visible{outline:2px solid var(--verde-claro);outline-offset:2px;border-radius:6px;}
  /* barras de rolagem discretas */
  *{scrollbar-width:thin;scrollbar-color:#c3d6cf transparent;}
  *::-webkit-scrollbar{width:9px;height:9px;}
  *::-webkit-scrollbar-thumb{background:#c3d6cf;border-radius:99px;border:2px solid transparent;background-clip:content-box;}
  *::-webkit-scrollbar-thumb:hover{background:#a9c4bb;background-clip:content-box;}

  /* ---- fundo do app ---- */
  #tela-app{background:
    radial-gradient(1200px 520px at 50% -140px, rgba(255,255,255,.13), transparent 62%),
    linear-gradient(178deg, var(--verde-escuro) 0%, var(--verde) 46%, #0a5f47 100%);
    background-attachment:fixed;}
  #marca-dagua{opacity:.045;}

  /* ---- cabeçalho ---- */
  header.topo{height:64px;background:linear-gradient(90deg,#073f2e,#0a5744 55%,#0b6249);
    border-bottom:1px solid rgba(255,255,255,.10);box-shadow:0 1px 0 rgba(255,255,255,.06),0 6px 24px rgba(0,0,0,.22);}
  .marca-topo .logo-slot{filter:drop-shadow(0 2px 4px rgba(0,0,0,.28));}
  .user-box .avatar{background:linear-gradient(150deg,#ffffff,#dfeee8);
    box-shadow:0 2px 8px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.7);letter-spacing:.3px;}
  .user-box .sair{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);
    backdrop-filter:blur(6px);transition:background .16s,border-color .16s,transform .06s;}
  .user-box .sair:active{transform:scale(.97);}

  /* ---- abas ---- */
  .container{max-width:840px;padding:26px 18px 72px;}
  .abas{gap:7px;margin-bottom:22px;}
  .abas button{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);
    padding:9px 16px;border-radius:999px;font-size:12.8px;letter-spacing:.1px;
    backdrop-filter:blur(8px);transition:background .16s,color .16s,box-shadow .18s,transform .1s;}
  .abas button:hover{background:rgba(255,255,255,.19);transform:translateY(-1px);}
  .abas button.ativa{background:#fff;color:var(--verde-escuro);border-color:#fff;
    box-shadow:0 8px 20px -8px rgba(0,0,0,.45);transform:none;}
  .abas button.ativa .ico{color:var(--verde-claro);}
  .noti{box-shadow:0 0 0 2px rgba(255,255,255,.45),0 2px 6px rgba(226,59,46,.45);
    background:linear-gradient(160deg,#e8483a,#cf2b1e);}

  /* ---- painéis ---- */
  .painel{border:1px solid rgba(255,255,255,.55);border-radius:var(--radius);
    box-shadow:var(--sombra-md);padding:26px;margin-bottom:16px;}
  .painel h2{font-size:19px;font-weight:700;letter-spacing:-.02em;
    display:flex;align-items:center;gap:10px;}
  .painel h2::before{content:"";width:4px;height:19px;border-radius:3px;flex:none;
    background:linear-gradient(180deg,var(--verde-claro),var(--verde));}
  .painel .desc{margin:0 0 20px;padding-left:14px;line-height:1.55;}
  .painel h2+.desc{margin-top:6px;}

  /* ---- cartões de escolha ---- */
  .cartao-escolha{border:1px solid var(--linha-suave);border-radius:12px;padding:18px;
    box-shadow:var(--sombra-xs);transition:border-color .16s,box-shadow .2s,transform .16s;}
  .cartao-escolha:hover{border-color:#b9d6cc;box-shadow:0 12px 26px -14px rgba(12,107,79,.5);transform:translateY(-2px);}
  .cartao-escolha .ico-wrap{background:linear-gradient(150deg,#eef6f2,#dfeee8);
    box-shadow:inset 0 0 0 1px rgba(12,107,79,.08);border-radius:11px;}
  .cartao-escolha b{letter-spacing:-.01em;}

  /* ---- campos ---- */
  .campo label{font-size:11.5px;text-transform:uppercase;letter-spacing:.55px;color:var(--texto-suave);font-weight:700;}
  .campo input,.campo select,.combo>input{border:1px solid var(--linha);border-radius:10px;
    background-color:var(--fundo-campo);padding:11px 13px;transition:border-color .15s,box-shadow .15s,background-color .15s;}
  .campo input:hover,.campo select:hover,.combo>input:hover{border-color:#bcd4cb;}
  .campo input:focus,.campo select:focus,.combo>input:focus{background-color:#fff;
    border-color:var(--verde-claro);box-shadow:0 0 0 3px rgba(18,135,106,.13);}
  select,.campo select,.barra-filtros select,.conv-select{appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6f68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat;background-position:right 11px center;background-size:15px;padding-right:34px !important;}
  .conv-select{width:100%;font-size:14px;font-weight:600;color:var(--verde-escuro);
    padding:12px 13px;border:1px solid var(--linha);border-radius:10px;background-color:var(--fundo-campo);}
  .conv-select:focus{outline:none;background-color:#fff;border-color:var(--verde-claro);box-shadow:0 0 0 3px rgba(18,135,106,.13);}
  .anexo-box{border-radius:12px;}

  /* ---- botões ---- */
  .btn{border-radius:10px;padding:12px 16px;letter-spacing:.1px;
    background:linear-gradient(160deg,var(--verde-claro),var(--verde) 62%);
    box-shadow:0 6px 16px -8px rgba(12,107,79,.85);transition:filter .16s,box-shadow .18s,transform .06s;}
  .btn:hover{background:linear-gradient(160deg,var(--verde),var(--verde-escuro) 70%);
    box-shadow:0 10px 22px -10px rgba(12,107,79,.9);}
  .btn.secundario{background:#eef4f1;box-shadow:none;}
  .btn.secundario:hover{background:#e2ece8;box-shadow:none;}
  .btn.ghost{background:transparent;box-shadow:none;}
  .btn-receber,.btn-pagar,.btn-pagar-fin,.btn-enviar-analista{
    background:linear-gradient(160deg,var(--verde-claro),var(--verde) 62%);
    box-shadow:0 5px 14px -7px rgba(12,107,79,.9);transition:filter .16s,transform .06s,box-shadow .18s;}
  .btn-receber:hover,.btn-pagar:hover,.btn-pagar-fin:hover,.btn-enviar-analista:hover{
    background:linear-gradient(160deg,var(--verde),var(--verde-escuro) 70%);}
  .btn-receber:active,.btn-pagar-fin:active,.btn-mini:active,.btn-detalhes:active{transform:scale(.98);}
  .btn-mini,.btn-detalhes{border-color:var(--linha-suave);box-shadow:var(--sombra-xs);border-radius:9px;}
  .btn-enviar-analista[disabled]{background:#eef2f0;box-shadow:none;}

  /* ---- chips ---- */
  .conv-chip,.chip,.ex-chip{border-color:var(--linha-suave);box-shadow:var(--sombra-xs);border-radius:10px;}
  .ex-chip{border-radius:999px;}
  .conv-chip.selecionado{background:linear-gradient(160deg,var(--verde-claro),var(--verde) 65%);
    box-shadow:0 8px 18px -9px rgba(12,107,79,.95);}
  .ex-chip.ativa{background:linear-gradient(160deg,var(--verde-claro),var(--verde) 65%);
    box-shadow:0 6px 14px -8px rgba(12,107,79,.9);}

  /* ---- barra de filtros ---- */
  .barra-filtros{background:linear-gradient(180deg,#f8fbfa,#f1f7f4);
    border:1px solid var(--linha-suave);border-radius:12px;padding:15px;gap:11px;}
  .barra-filtros label{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--texto-suave);}
  .barra-filtros input,.barra-filtros select{border:1px solid var(--linha);border-radius:9px;padding:9px 11px;background-color:#fff;}
  .barra-filtros input:focus,.barra-filtros select:focus{box-shadow:0 0 0 3px rgba(18,135,106,.12);}
  .filtros-rodape{margin:10px 0 16px;font-weight:600;}

  /* ---- listas ---- */
  .item-prot,.item-adm,.ex-grupo{border:1px solid var(--linha-suave);border-radius:12px;
    box-shadow:var(--sombra-xs);transition:border-color .16s,box-shadow .2s,transform .16s;}
  .item-prot:hover,.item-adm:hover{border-color:#c6ded5;box-shadow:0 10px 24px -16px rgba(8,60,44,.7);transform:translateY(-1px);}
  .item-prot .num{letter-spacing:.2px;}
  .item-prot .valor{font-size:16px;letter-spacing:-.02em;}
  .vazio{padding:44px 16px;color:#9db3ab;font-size:13.5px;line-height:1.6;
    border:1px dashed var(--linha);border-radius:12px;background:#fbfdfc;}
  .tag,.item-badge,.ia-cargo,.ex-depto,.tag-reaproveitado{letter-spacing:.2px;}

  /* ---- avisos ---- */
  .aviso-info{display:flex;align-items:center;gap:9px;background:#eef6f2;border:1px solid #cfe4db;
    color:var(--verde-escuro);border-radius:10px;padding:11px 14px;font-size:12.5px;font-weight:600;margin:0 0 14px;line-height:1.5;}
  .aviso-info .ico{color:var(--verde-claro);flex:none;}
  .aviso-consulta{border-radius:10px;line-height:1.5;}
  .conv-aviso{border-radius:9px;}

  /* ---- modais e comprovante ---- */
  .overlay{background:rgba(6,34,26,.58);backdrop-filter:blur(3px);}
  .modal{border-radius:18px;box-shadow:var(--sombra-lg);padding:34px 30px;}
  .modal h3{letter-spacing:-.02em;}
  .modal .check-ok{background:linear-gradient(150deg,#eef6f2,#dcece5);
    box-shadow:inset 0 0 0 1px rgba(12,107,79,.10);}
  .modal .num-prot{background:linear-gradient(150deg,#eef6f2,#e0efe8);letter-spacing:2px;}
  .comprovante{border-radius:20px;box-shadow:var(--sombra-lg);}
  .cp-topo{background:linear-gradient(125deg,#073f2e,#0c6b4f 55%,#12876a);}
  .cp-num{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);}

  /* ---- login ---- */
  #tela-login{background:
    radial-gradient(900px 460px at 50% 0%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(160deg,#062f23,var(--verde) 58%,var(--verde-claro));}
  .card-login{border-radius:20px;box-shadow:var(--sombra-lg);}
  .card-login .topo-verde{background:linear-gradient(140deg,#0a5744,var(--verde) 60%,#12876a);}
  .card-login .corpo{padding:28px 32px 30px;}
  .rodape-login{border-top-color:var(--linha-suave);}

  /* ---- rodapé do protocolo em andamento ---- */
  .mini-itens{border:1px solid var(--linha-suave);}
  .mini-item{background:linear-gradient(180deg,#f4faf7,#eef6f2);border:1px solid #e0efe8;border-radius:9px;}
  .rascunho-banner{border-left-width:4px;}

  @media(max-width:640px){
    .container{padding:18px 13px 60px;}
    .painel{padding:20px 17px;}
    .abas button{padding:8px 13px;font-size:12.2px;}
    .item-prot{flex-direction:column;}
    .item-prot .dir{text-align:left;}
  }