/* BR Transmissões — sistema de solicitações
   Clean, uma família de fonte, sem bibliotecas. */

:root{
  --ground:#F6F7F9;
  --panel:#FFFFFF;
  --panel-2:#F1F3F6;
  --ink:#14181D;
  --ink-2:#5B6672;
  --ink-3:#8B95A1;
  --line:#E4E8ED;
  --line-2:#D3D9E0;

  --accent:#14639E;
  --accent-ink:#FFFFFF;
  --accent-soft:#E6F0F8;

  --ok:#0F7B4F;    --ok-soft:#E3F3EA;
  --warn:#A96A00;  --warn-soft:#FBF0DC;
  --stop:#B3261E;  --stop-soft:#FBE7E5;

  --r:12px;
  --r-sm:9px;
  --sombra:0 1px 2px rgba(20,24,29,.05), 0 1px 1px rgba(20,24,29,.04);
  --sombra-alta:0 12px 28px rgba(20,24,29,.14);
}

@media (prefers-color-scheme: dark){
  :root{
    --ground:#0F1216;
    --panel:#171B21;
    --panel-2:#1E242B;
    --ink:#E9EDF2;
    --ink-2:#A3AEBB;
    --ink-3:#77828F;
    --line:#252C34;
    --line-2:#333C46;

    --accent:#63B3E8;
    --accent-ink:#0B1620;
    --accent-soft:#152634;

    --ok:#5FC08D;    --ok-soft:#12271C;
    --warn:#E0A954;  --warn-soft:#2C2213;
    --stop:#E98A82;  --stop-soft:#2E1917;

    --sombra:0 1px 2px rgba(0,0,0,.4);
    --sombra-alta:0 14px 32px rgba(0,0,0,.5);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:640px;margin:0 auto;padding:20px 16px 72px}
.wrap.largo{max-width:1000px}

/* Cabeçalho */
.topo{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line);
}
h1{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0;text-wrap:balance}
h2{font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0}
.sub{color:var(--ink-2);font-size:13.5px;margin:4px 0 0}

/* Superfícies */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px;
  box-shadow:var(--sombra);
}

/* Formulário */
label{display:block;font-size:12.5px;font-weight:500;color:var(--ink-2);margin:0 0 6px}
.field{margin-bottom:16px}

input,select,textarea{
  width:100%;
  font-family:inherit;
  font-weight:400;
  font-size:16px;   /* menos que isso e o iPhone dá zoom ao focar */
  line-height:1.4;
  color:var(--ink);
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  padding:12px 13px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{min-height:76px;resize:vertical}
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px;
}

.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.row2{grid-template-columns:1fr}}
.hint{font-size:12.5px;color:var(--ink-3);margin:7px 0 0;line-height:1.4}

/* Botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-height:46px;
  font-family:inherit;font-weight:500;font-size:15px;line-height:1;
  padding:13px 18px;border:1px solid transparent;border-radius:var(--r-sm);
  background:var(--accent);color:var(--accent-ink);
  cursor:pointer;text-decoration:none;text-align:center;
  transition:filter .12s ease, background .12s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{filter:brightness(.95)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.ghost{background:var(--panel);color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--panel-2);filter:none}
.btn.recusar{background:var(--panel);color:var(--stop);border-color:var(--line-2)}
.btn.recusar:hover{background:var(--stop-soft);filter:none}
.btn.mini{width:auto;min-height:38px;padding:9px 15px;font-size:13.5px}

/* Avisos */
.aviso{border-radius:var(--r-sm);padding:12px 14px;font-size:13.5px;margin-bottom:16px;border:1px solid transparent}
.aviso.ok{background:var(--ok-soft);color:var(--ok)}
.aviso.erro{background:var(--stop-soft);color:var(--stop)}
.note{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-sm);padding:12px 14px;font-size:13px;margin-bottom:16px}

/* Abas e filtros */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs a{
  font-family:inherit;font-weight:500;font-size:13px;line-height:1;padding:9px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);
  text-decoration:none;white-space:nowrap;transition:background .12s ease,color .12s ease;
}
.tabs a:hover{background:var(--panel-2);color:var(--ink)}
.tabs a[aria-current="page"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}

.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-bottom:18px}
.seg button{
  font-family:inherit;font-weight:500;font-size:13.5px;line-height:1;padding:12px 8px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2);cursor:pointer;
}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* Busca de produto */
.combo{position:relative}
.sug{
  position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);
  margin:0;padding:6px;list-style:none;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);
  max-height:280px;overflow-y:auto;box-shadow:var(--sombra-alta);
}
.sug li{
  padding:11px 12px;border-radius:var(--r-sm);cursor:pointer;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;line-height:1.4;color:var(--ink);
}
.sug li:hover,.sug li[aria-selected="true"]{background:var(--panel-2)}

/* Listas */
.listhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:28px 2px 12px}
.count{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--ink-2);
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 11px;white-space:nowrap;
}

ul.itens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
ul.itens li{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;box-shadow:var(--sombra);position:relative;overflow:hidden;
}
ul.itens li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-2)}
li[data-status="pendente"]::before{background:var(--warn)}
li[data-status="aprovado"]::before{background:var(--ok)}
li[data-status="recusado"]::before{background:var(--stop)}
li[data-status="aplicado"]::before{background:var(--accent)}
li[data-status="erro"]::before{background:var(--stop);width:4px}

.li-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.kind{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.chip{font-size:11px;font-weight:500;padding:4px 10px;border-radius:999px;white-space:nowrap}
.chip.pendente{background:var(--warn-soft);color:var(--warn)}
.chip.aprovado{background:var(--ok-soft);color:var(--ok)}
.chip.recusado{background:var(--stop-soft);color:var(--stop)}
.chip.aplicado{background:var(--accent-soft);color:var(--accent)}
.chip.erro{background:var(--stop);color:#fff}

.prod{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13.5px;font-weight:500;
  line-height:1.4;word-break:break-word;color:var(--ink);
}
.detail{font-size:14px;color:var(--ink-2);margin-top:5px;line-height:1.5}
.detail b{font-weight:600;color:var(--ink)}
.forte{color:var(--stop);font-weight:600}
.obs{font-size:13px;color:var(--ink-3);margin-top:6px;line-height:1.5}

.li-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.when{font-size:12.5px;color:var(--ink-3)}
.acoes{display:flex;gap:8px;flex-wrap:wrap}
.empty{color:var(--ink-3);font-size:14px;padding:20px 2px;text-align:center}

/* Dashboard */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-top:18px}
.tile{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;display:flex;flex-direction:column;gap:3px;box-shadow:var(--sombra);
}
.tile .rot{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.tile .num{
  font-size:32px;font-weight:600;line-height:1.15;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-top:2px;
}
.tile .pe{font-size:12.5px;color:var(--ink-3)}

.tabela{
  overflow-x:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sombra);
}
.tabela table{border-collapse:collapse;width:100%;font-size:14px}
.tabela th{
  text-align:left;font-size:12.5px;font-weight:500;color:var(--ink-2);
  padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel);
}
.tabela td{padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela tbody tr:hover td{background:var(--panel-2)}
.tabela td.mono{font-variant-numeric:tabular-nums;text-align:right}
.tabela th:not(:first-child){text-align:right}

.barra{display:flex;align-items:center;gap:12px;margin:9px 0}
.barra .dia{font-size:12.5px;color:var(--ink-2);width:46px;flex:none;font-variant-numeric:tabular-nums}
.barra .trilho{flex:1;height:8px;background:var(--panel-2);border-radius:999px;overflow:hidden}
.barra .preenche{display:block;height:100%;background:var(--accent);border-radius:999px}
.barra .valor{font-size:12.5px;color:var(--ink-2);width:34px;text-align:right;flex:none;font-variant-numeric:tabular-nums}

footer{margin-top:32px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* Seções e opções dos formulários longos */
.secao{
  font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;
  padding-top:6px;margin:22px 0 14px;border-top:1px solid var(--line);
}
.secao:first-child{margin-top:0;border-top:0;padding-top:0}
.opc{font-weight:400;color:var(--ink-3)}
.opcoes{display:flex;flex-wrap:wrap;gap:8px}
.opcao{
  display:inline-flex;align-items:center;gap:8px;margin:0;cursor:pointer;
  background:var(--panel);border:1px solid var(--line-2);border-radius:999px;
  padding:9px 14px;font-size:13.5px;font-weight:400;color:var(--ink);
  transition:border-color .12s ease, background .12s ease;
}
.opcao:hover{background:var(--panel-2)}
.opcao input{width:auto;margin:0;accent-color:var(--accent)}
.opcao:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.extras{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.extras .par{
  display:inline-flex;gap:6px;align-items:baseline;font-size:12.5px;color:var(--ink);
  background:var(--panel-2);border-radius:7px;padding:5px 9px;
}
.extras .par .rot{color:var(--ink-3)}
details.detalhes{margin-top:10px}
details.detalhes summary{
  cursor:pointer;font-size:13px;color:var(--accent);list-style:none;
  padding:6px 0;user-select:none;
}
details.detalhes summary::-webkit-details-marker{display:none}
details.detalhes summary::before{content:"⌄ ";display:inline-block;transform:translateY(-2px)}