/* RodoCompras — identidade visual (logo da estrada com seta: azul-noite + amarelo) */
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800;900&display=swap");

:root{
  --azul:#0f2c4c; --azul-escuro:#081d33; --amarelo:#f5b301; --amarelo-escuro:#d99c00;
  --marca:#0f2c4c; --marca-escura:#081d33; --sobre-marca:#fff;
  --fundo:#eef1f6; --papel:#fff; --linha:#e1e6ef; --suave:#5b6b80; --texto:#13233a;
  --sombra:0 1px 2px rgba(15,44,76,.06),0 8px 24px rgba(15,44,76,.07);
}
@media (prefers-color-scheme:dark){:root{
  --marca:#f5b301; --marca-escura:#d99c00; --sobre-marca:#0f2c4c;
  --fundo:#0a1422; --papel:#132238; --linha:#22344d; --suave:#9fb0c6; --texto:#e8eef6;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}}

html,body{font-family:"Exo 2",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;-webkit-font-smoothing:antialiased}
body{background:var(--fundo)}

/* Cabeçalho */
header:not(.barra-topo){background:radial-gradient(120% 140% at 100% 0%,#1c4a7a 0%,#0f2c4c 55%,#0a2140 100%)!important;color:#fff;
  border-radius:0 0 22px 22px;box-shadow:0 6px 20px rgba(15,44,76,.25);padding-bottom:16px!important}
header:not(.barra-topo) .marca{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:500!important;font-size:1.05rem!important;letter-spacing:.02em}
header:not(.barra-topo) .marca svg{width:40px;height:40px;flex:none}
header:not(.barra-topo) .marca .nome{font-size:1.28rem;letter-spacing:.01em;line-height:1}
header:not(.barra-topo) .marca .nome b{font-weight:900}
header:not(.barra-topo) .marca .papel{margin-left:auto;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  background:var(--amarelo);color:#0f2c4c;border-radius:99px;padding:4px 11px}
header:not(.barra-topo) .sub,header:not(.barra-topo) .posto{opacity:.85!important;padding-left:50px}
header:not(.barra-topo) h1{font-weight:800}

/* Cartões e títulos */
.cartao{border:1px solid var(--linha)!important;border-radius:20px!important;box-shadow:var(--sombra)}
h1,h2{font-weight:800;letter-spacing:-.01em}

/* Botões */
button{border-radius:14px;font-weight:700;letter-spacing:.01em;transition:transform .08s,filter .15s}
button:active:not(:disabled){transform:scale(.98)}
.principal{background:var(--amarelo)!important;color:#0f2c4c!important;box-shadow:0 4px 14px rgba(245,179,1,.35)}
.principal:hover{filter:brightness(1.04)} .principal:active{background:var(--amarelo-escuro)!important}
.secundario{border-radius:14px}
.sn button[aria-pressed="true"],.cp-sn button[aria-pressed="true"],.abas button.ativa{color:var(--sobre-marca)!important}
.avatar{color:var(--sobre-marca)!important}

/* Campos */
input,select,textarea{border-radius:12px!important}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amarelo)!important;box-shadow:0 0 0 3px rgba(245,179,1,.25)}

/* Faixas de aviso */
.faixa{border-radius:16px!important}

/* Painel do operador (barra clara no topo) */
.barra-topo .logo{gap:10px}
.barra-topo .logo svg{width:36px;height:36px;flex:none}
.barra-topo .logo-nome{font-weight:500;letter-spacing:.01em;font-size:1.18rem}
.barra-topo .logo-nome b{font-weight:900;color:var(--texto)!important}
.barra-topo .logo .tag{background:var(--amarelo);color:#0f2c4c!important;border:0!important;font-weight:800}
.dd-p .ic{background:rgba(245,179,1,.16)!important;color:var(--texto)!important}
.conta{border-radius:20px!important}