/* Central: so o que e proprio deste app. O visual oficial (tokens, cabecalho, navegacao, botoes, emblemas) vem de ../_visual (D26). */
:root { --rr-topo-1: #673eaf; --rr-topo-2: #542b93; --lateral: 240px; }   /* cor do perfil Central */

.rr-topo-sub { display: none; }
.rr-marca-topo { display: inline-flex; }
.rr-lateral-marca { display: none; }
.rr-badge.zero { background: var(--rr-neutral-bg); color: var(--rr-chip-txt); }

/* fila */
.lista { gap: 12px; }
.item { background: var(--cartao); border: 1px solid var(--linha); border-left: 4px solid transparent; border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 8px; }
.item[data-critica="true"] { border-left-color: var(--rr-critical); }
.item .titulo { font-weight: 750; font-size: 1.05rem; line-height: 1.3; }
.item .acoes { margin-top: 4px; flex-direction: row; flex-wrap: wrap; }
.item .acoes button { flex: 1 1 140px; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--linha); }
.item audio { width: 100%; }
.contagem { font-variant-numeric: tabular-nums; }
.vazio { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 40px 12px; color: var(--suave); }
.vazio svg { color: var(--rr-success); }

/* ---------- celular: cabecalho colorido com a marca + navegacao inferior (ja vem de rr.css) */
@media (max-width: 759.98px) {
  .rr-badge.zero { display: none; }   /* no celular so aparece o selo com pendencias; o numero fica no rotulo para leitor de tela */
}

/* ---------- desktop (>= 760 px): menu lateral marinho + cabecalho branco (visual oficial da Central) */
@media (min-width: 760px) {
  body.rr-com-nav { padding-left: var(--lateral); }
  body.rr-com-nav .rr-topo { background: var(--rr-panel); color: var(--rr-text); border-bottom: 1px solid var(--rr-line); padding: 14px 28px; gap: 14px; flex-wrap: nowrap; }
  body.rr-com-nav .rr-marca-topo { display: none; }
  body.rr-com-nav .rr-topo-sub { display: block; font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; opacity: 1; }
  body.rr-com-nav .rr-topo h1 { margin: 0; }
  body.rr-com-nav .rr-av { width: 40px; height: 40px; }
  body.rr-com-nav .rr-chip { background: var(--rr-info-bg); color: var(--rr-info-txt); }
  body.rr-com-nav .rr-chip.offline { background: var(--rr-warning-bg); color: var(--rr-warning-txt); }
  body.rr-com-nav .rr-topo button.rr-topo-btn { background: transparent; color: var(--rr-text); border: 1.5px solid var(--rr-campo-borda); padding: 0 18px; font-size: .9rem; }
  body.rr-com-nav .rr-topo button.rr-topo-btn:hover { background: var(--rr-blue-soft); }
  body.rr-com-nav .rr-topo button:focus-visible { outline-color: var(--rr-info); }
  body.rr-com-nav main { max-width: 1040px; padding: 24px 28px 40px; margin: 0; }
  body.rr-com-nav .lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); align-items: start; }
  body.rr-com-nav .lista > .vazio, body.rr-com-nav .lista > .faixa { grid-column: 1 / -1; }
  body.rr-com-nav .avisos { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding-left: var(--lateral); }

  .rr-nav { top: 0; right: auto; bottom: 0; width: var(--lateral); flex-direction: column; gap: 4px; padding: 18px 12px; border: 0; box-shadow: none; overflow-y: auto;
    background: linear-gradient(160deg, var(--rr-navy-deep), #122d40); }
  .rr-lateral-marca { display: block; padding: 4px 8px 18px; color: #fff; }
  .rr-lateral-lema { font-size: .72rem; opacity: .8; margin-top: 4px; }
  .rr-nav button { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 10px; color: #dbe7f0; font-size: .98rem; font-weight: 600; text-align: left; }
  .rr-nav button:hover { background: rgba(255, 255, 255, .08); }
  .rr-nav button .rr-nav-ico { width: 28px; height: 28px; background: none; }
  .rr-nav button .rr-nav-rot { flex: 1; }
  .rr-nav button[aria-current="page"] { background: var(--rr-blue); color: #fff; font-weight: 800; }
  .rr-nav button[aria-current="page"] .rr-nav-ico { background: none; }
  .rr-nav button:focus-visible { outline-color: #fff; }
  .rr-nav .rr-badge { position: static; margin-left: auto; }
  .rr-nav .rr-badge.zero { background: rgba(255, 255, 255, .16); color: #dbe7f0; }
}
/* janela de 760 a 1100 px: menu so com icones */
@media (min-width: 760px) and (max-width: 1099.98px) {
  :root { --lateral: 76px; }
  .rr-lateral-lema, .rr-nav .rr-nav-rot { display: none; }
  .rr-lateral-marca .rr-marca-nome { display: none; }
  .rr-lateral-marca { padding-inline: 6px; }
  .rr-nav button { justify-content: center; padding: 0; position: relative; }
  .rr-nav .rr-badge { position: absolute; top: 2px; right: 4px; margin: 0; }
}