/* Redes — a fábrica de conteúdo (24/09/2026).

   Mesma gramática visual do resto do Tião: painel escuro, número grande, toque
   de 44px. O que é novo aqui é o cartaz: a frase por cima da foto, do tamanho
   que ela vai sair no Instagram, para ele decidir olhando e não imaginando. */

.rd-abas {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rd-abas::-webkit-scrollbar { display: none; }
.rd-aba {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  border: 1px solid var(--linha-forte); background: transparent; color: var(--fraco);
  border-radius: 999px; padding: 8px 15px; font-size: 14px; min-height: 40px;
}
.rd-aba .ic { width: 16px; height: 16px; }
.rd-aba.ativa { background: var(--marca); border-color: var(--marca); color: #fff; }

/* ------------------------------------------------------------- os números */
.rd-topo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.rd-num {
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--painel);
  padding: 14px 16px; display: grid; gap: 2px;
}
.rd-num b { font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rd-num span { font-size: 13px; color: var(--fraco); }
.rd-num small { font-size: 11.5px; color: var(--apagado); }

.rd-avisos { display: grid; gap: 8px; margin-bottom: 16px; }
.rd-aviso {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  background: var(--marca-fraca); border: 1px solid rgba(200, 98, 42, .3);
  border-radius: var(--raio-p); padding: 11px 14px; color: var(--texto); min-height: 46px;
}
.rd-aviso span { flex: 1; font-size: 13.5px; }
.rd-aviso .ic { width: 17px; height: 17px; color: var(--marca); flex: none; }

.rd-bts { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-bts .ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
button.primaria { background: var(--marca); border-color: var(--marca); color: #fff; }

.rd-linha { cursor: pointer; }
.rd-linha:hover { background: var(--painel2); }
.rd-mini-num {
  display: grid; justify-items: end; min-width: 68px; font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.rd-mini-num small { color: var(--apagado); font-size: 10.5px; }

/* --------------------------------------------------------------- o ritmo */
.rd-ritmo {
  display: grid; grid-template-columns: 1fr 80px auto; align-items: center;
  gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linha);
}
.rd-ritmo:last-child { border-bottom: 0; }
.rd-ritmo > span { font-size: 13.5px; }
.rd-ritmo b { font-variant-numeric: tabular-nums; }
.rd-ritmo b small { color: var(--apagado); font-weight: 500; }
.rd-ritmo > small { grid-column: 1 / -1; color: var(--apagado); font-size: 11.5px; margin-top: -6px; }
.rd-barra { height: 8px; border-radius: 999px; background: var(--fundo2); overflow: hidden; }
.rd-barra i { display: block; height: 100%; background: var(--marca); border-radius: 999px; }
.rd-barra.pequena { height: 6px; }

.rd-fila-mapa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rd-fila-item {
  display: grid; gap: 2px; justify-items: center; padding: 12px 6px;
  background: var(--painel2); border: 1px solid var(--linha); border-radius: var(--raio-p);
}
.rd-fila-item b { font-size: 20px; }
.rd-fila-item small { font-size: 11px; color: var(--apagado); }

/* -------------------------------------------------------------- o estúdio */
.rd-estudio { display: grid; grid-template-columns: 290px 1fr; gap: 16px; align-items: start; }
.rd-fila { display: grid; gap: 10px; position: sticky; top: 8px; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rd-chip {
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; min-height: 34px;
  background: transparent; border: 1px solid var(--linha-forte); color: var(--fraco);
}
.rd-chip.on { background: var(--painel2); color: var(--texto); border-color: var(--marca); }
.rd-nova { width: 100%; }
.rd-cards { display: grid; gap: 8px; max-height: 70vh; overflow: auto; }
.rd-card {
  display: grid; grid-template-columns: 4px 1fr auto; gap: 10px; align-items: center;
  text-align: left; background: var(--painel); border: 1px solid var(--linha);
  border-radius: var(--raio-p); padding: 10px 12px; min-height: 56px;
}
.rd-card.on { border-color: var(--marca); background: var(--painel2); }
.rd-card i { width: 4px; height: 34px; border-radius: 2px; display: block; }
.rd-card b { font-size: 13.5px; display: block; }
.rd-card small { font-size: 11.5px; color: var(--apagado); }
.rd-nota { font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 7px; border-radius: 8px; }
.rd-nota.boa { background: rgba(95, 174, 132, .18); color: var(--ok); }
.rd-nota.media { background: rgba(212, 162, 75, .18); color: var(--aviso); }
.rd-nota.fraca { background: rgba(220, 100, 78, .18); color: var(--alerta); }

.rd-peca { display: grid; gap: 14px; }
.rd-vazio {
  display: grid; gap: 12px; justify-items: start; background: var(--painel);
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px;
}
.rd-vazio .ic { width: 34px; height: 34px; color: var(--marca); }
.rd-vazio h2 { margin: 0; font-size: 18px; }
.rd-vazio p { margin: 0; color: var(--fraco); max-width: 60ch; }

.rd-cabeca { display: grid; gap: 8px; }
.rd-titulo { font-size: 19px; font-weight: 600; background: transparent; border: 0;
  border-bottom: 1px solid var(--linha); padding: 6px 2px; }
.rd-titulo:focus { outline: none; border-color: var(--marca); }
.rd-cabeca-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-cabeca input, .rd-cabeca select, .rd-cabeca textarea {
  background: var(--painel); border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p); padding: 9px 11px; min-height: 40px;
}
.rd-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

.rd-notao {
  display: flex; align-items: center; gap: 12px; border-radius: var(--raio);
  padding: 12px 16px; border: 1px solid var(--linha-forte); background: var(--painel);
}
.rd-notao b { font-size: 30px; font-variant-numeric: tabular-nums; }
.rd-notao span { color: var(--fraco); font-size: 13px; }
.rd-notao small { color: var(--texto); font-size: 13px; margin-left: auto; text-align: right; max-width: 55%; }
.rd-notao.boa b { color: var(--ok); }
.rd-notao.media b { color: var(--aviso); }
.rd-notao.fraca b { color: var(--alerta); }

.rd-criterio {
  display: grid; grid-template-columns: 110px 1fr 24px; gap: 8px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--linha);
}
.rd-criterio:last-child { border: 0; }
.rd-criterio > span { font-size: 12.5px; color: var(--fraco); }
.rd-criterio b { font-variant-numeric: tabular-nums; text-align: right; }
.rd-criterio small { grid-column: 1 / -1; color: var(--apagado); font-size: 11.5px; margin-top: -4px; }

.rd-peca textarea, .rd-peca input {
  width: 100%; background: var(--fundo2); border: 1px solid var(--linha);
  border-radius: var(--raio-p); padding: 10px 12px; color: var(--texto);
  font: inherit; line-height: 1.55; resize: vertical;
}
#rd-roteiro { font-size: 14.5px; }

/* ---------------------------------------------------------- cenas de vídeo */
.rd-cena {
  border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 12px;
  background: var(--fundo2); margin-bottom: 10px;
}
.rd-cena-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rd-cena-topo small { color: var(--apagado); }
.rd-cena-topo button { margin-left: auto; min-height: 32px; padding: 5px 10px; font-size: 12.5px; }
.rd-cena p.falado { margin: 0 0 6px; }
.rd-imagem { display: block; color: var(--fraco); font-size: 12.5px; margin-bottom: 8px; }
.rd-cena pre, .rd-cartaz pre {
  white-space: pre-wrap; word-break: break-word; font: 12.5px/1.5 var(--mono);
  background: var(--painel); border: 1px solid var(--linha); border-radius: 10px;
  padding: 10px; color: var(--fraco); margin: 0; max-height: 220px; overflow: auto;
}

/* ------------------------------------------------------------- o cartaz */
.rd-cartaz {
  display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start;
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 14px;
}
.rd-cartaz-foto {
  position: relative; aspect-ratio: 9 / 16; border-radius: var(--raio-p); overflow: hidden;
  background: linear-gradient(160deg, #0d1620, #1d2936); display: grid; place-items: center;
}
.rd-cartaz-foto img { width: 100%; height: 100%; object-fit: cover; }
.rd-cartaz-vazio { display: grid; gap: 8px; justify-items: center; color: var(--apagado); }
.rd-cartaz-vazio .ic { width: 30px; height: 30px; }
.rd-cartaz-frase {
  position: absolute; left: 10%; right: 10%; top: 50%; transform: translateY(-50%);
  text-align: center; font: 600 22px/1.28 var(--redonda); color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .65);
}
.rd-cartaz-lado { display: grid; gap: 8px; }
.rd-cartaz-lado > span { font-size: 12.5px; color: var(--fraco); }
.rd-dica { color: var(--apagado); font-size: 11.5px; }

/* ------------------------------------------------------------- histórias */
.rd-colar {
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px; margin-bottom: 16px; display: grid; gap: 10px;
}
.rd-colar h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.rd-colar h2 .ic { width: 19px; height: 19px; color: var(--marca); }
.rd-colar p { margin: 0; color: var(--fraco); font-size: 13.5px; max-width: 75ch; }
.rd-colar form { display: grid; gap: 8px; }
.rd-colar input, .rd-colar textarea, .rd-colar select {
  background: var(--fundo2); border: 1px solid var(--linha); border-radius: var(--raio-p);
  padding: 10px 12px; color: var(--texto); font: inherit; min-height: 42px; width: 100%;
}

.rd-historia {
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 14px; display: grid; gap: 8px;
}
.rd-historia-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-historia-topo b { font-size: 15px; }
.rd-historia-topo small { color: var(--apagado); font-size: 11.5px; }
.rd-historia-topo span { margin-left: auto; display: flex; gap: 6px; }
.rd-historia-topo button { min-height: 32px; padding: 5px 10px; font-size: 12.5px; }
.rd-historia p { margin: 0; color: var(--fraco); font-size: 13.5px; line-height: 1.55; }
.rd-licao { color: var(--marca); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.rd-licao .ic { width: 14px; height: 14px; }
.rd-frases { display: grid; gap: 6px; margin-top: 4px; }
.rd-frase {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center;
  background: var(--fundo2); border: 1px solid var(--linha); border-radius: var(--raio-p);
  padding: 9px 11px;
}
.rd-frase > span { font: 500 14px/1.4 var(--redonda); }
.rd-frase small { grid-column: 1; color: var(--apagado); font-size: 11px; }
.rd-frase button { grid-row: 1 / 3; min-height: 34px; padding: 5px 10px; font-size: 12.5px; }
.rd-passos { margin: 0; padding-left: 18px; color: var(--fraco); font-size: 13px; line-height: 1.7; }

/* --------------------------------------------------------------- virais */
.rd-formulas { display: grid; gap: 12px; margin-bottom: 16px; }
.rd-formula {
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 14px; display: grid; gap: 8px;
}
.rd-formula-topo { display: flex; align-items: center; gap: 10px; }
.rd-formula-topo b { font-size: 15px; }
.rd-formula-topo em {
  font-style: normal; margin-left: auto; color: var(--marca); font-weight: 600;
  font-size: 13px; background: var(--marca-fraca); padding: 3px 9px; border-radius: 8px;
}
.rd-formula-topo em.cinza { color: var(--fraco); background: var(--painel2); }
.rd-formula > small { color: var(--fraco); font-size: 13px; }
.rd-formula-partes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.rd-formula-partes span {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--apagado); margin-bottom: 2px;
}
.rd-formula-partes p { margin: 0; font-size: 12.5px; color: var(--texto); line-height: 1.45; }
.rd-formula-pe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-formula-pe small { color: var(--apagado); font-size: 11.5px; }
.rd-formula-pe span { margin-left: auto; display: flex; gap: 6px; }
.rd-formula-pe button { min-height: 34px; padding: 5px 10px; font-size: 12.5px; }

/* ------------------------------------------------------------ calendário */
.rd-grade {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 16px;
}
.rd-dia {
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio-p);
  padding: 8px; min-height: 120px; display: grid; gap: 6px; align-content: start;
}
.rd-dia.hoje { border-color: var(--marca); }
.rd-dia-topo { display: flex; align-items: center; justify-content: space-between; }
.rd-dia-topo b { font-size: 12.5px; color: var(--fraco); }
.rd-dia-topo button { min-height: 26px; padding: 2px 6px; background: transparent; border: 0; }
.rd-dia-topo .ic { width: 14px; height: 14px; }
.rd-mini {
  text-align: left; background: var(--fundo2); border: 1px solid var(--linha);
  border-left: 3px solid var(--marca); border-radius: 8px; padding: 6px 8px; min-height: 40px;
}
.rd-mini b { display: block; font-size: 11.5px; line-height: 1.3; }
.rd-mini small { color: var(--apagado); font-size: 10.5px; }

/* --------------------------------------------------------------- inbound */
.rd-msgs { display: grid; gap: 10px; }
.rd-msg {
  background: var(--painel); border: 1px solid var(--linha); border-left: 3px solid var(--fraco);
  border-radius: var(--raio); padding: 13px; display: grid; gap: 8px;
}
.rd-msg.quente { border-left-color: var(--alerta); }
.rd-msg.morno { border-left-color: var(--aviso); }
.rd-msg.frio { border-left-color: var(--apagado); }
.rd-msg-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-msg-topo b { font-size: 14.5px; }
.rd-msg-topo small { color: var(--apagado); font-size: 11.5px; margin-left: auto; }
.rd-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--painel2);
  color: var(--fraco);
}
.rd-tag.quente { background: rgba(220, 100, 78, .18); color: var(--alerta); }
.rd-tag.morno { background: rgba(212, 162, 75, .18); color: var(--aviso); }
.rd-msg textarea {
  width: 100%; background: var(--fundo2); border: 1px solid var(--linha);
  border-radius: var(--raio-p); padding: 9px 11px; color: var(--texto); font: inherit;
}
.rd-msg-bts { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-msg-bts button { min-height: 36px; font-size: 13px; }
.rd-respondido { color: var(--ok); font-size: 12px; }

/* ----------------------------------------------------------------- plano */
.rd-campo { display: grid; gap: 3px; margin-bottom: 12px; }
.rd-campo > span { font-size: 13px; }
.rd-campo > small { color: var(--apagado); font-size: 11.5px; }
.rd-campo textarea, .rd-campo input {
  width: 100%; background: var(--fundo2); border: 1px solid var(--linha);
  border-radius: var(--raio-p); padding: 9px 11px; color: var(--texto); font: inherit;
}
.rd-pilar { display: grid; grid-template-columns: 1fr 1.4fr 70px; gap: 6px; margin-bottom: 6px; }
.rd-pilar input {
  background: var(--fundo2); border: 1px solid var(--linha); border-radius: var(--raio-p);
  padding: 8px 10px; color: var(--texto); min-height: 40px; width: 100%;
}
.rd-ritmos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.rd-ritmos label { display: grid; gap: 3px; font-size: 12.5px; color: var(--fraco); }
.rd-ritmos input {
  background: var(--fundo2); border: 1px solid var(--linha); border-radius: var(--raio-p);
  padding: 8px 10px; color: var(--texto); min-height: 40px;
}
.rd-proposta {
  background: var(--painel); border: 1px solid var(--marca); border-radius: var(--raio);
  padding: 16px; margin-bottom: 16px; display: grid; gap: 10px;
}
.rd-proposta h2 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.rd-proposta h2 .ic { width: 18px; height: 18px; color: var(--marca); }
.rd-aviso-texto { margin: 0; color: var(--aviso); font-size: 12.5px; }
.rd-proposta-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.rd-proposta-grade span {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--apagado);
}
.rd-proposta-grade p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; }

/* ---------------------------------------------------------------- contas */
.rd-token { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rd-token input {
  flex: 1; min-width: 200px; background: var(--fundo2); border: 1px solid var(--linha);
  border-radius: var(--raio-p); padding: 10px 12px; color: var(--texto); min-height: 42px;
}
.rd-nota-legal {
  border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 14px;
  background: var(--painel);
}
.rd-nota-legal b { font-size: 13.5px; }
.rd-nota-legal p { margin: 6px 0 0; color: var(--fraco); font-size: 12.5px; line-height: 1.55; }

/* ----------------------------------------------------------------- leitura */
.rd-leitura {
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 14px; margin: 14px 0; display: grid; gap: 10px;
}
.rd-leitura-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.rd-leitura-grade span {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--marca);
}
.rd-leitura-grade p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; }

/* ------------------------------------------------------------------ modal */
.rd-modal {
  position: fixed; inset: 0; background: rgba(8, 13, 19, .72); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 60; padding: 16px;
}
.rd-modal-caixa {
  background: var(--painel); border: 1px solid var(--linha-forte); border-radius: var(--raio);
  width: min(620px, 100%); max-height: 86vh; display: grid; grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
.rd-modal-topo {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  border-bottom: 1px solid var(--linha);
}
.rd-modal-topo button { background: transparent; border: 0; min-height: 34px; }
.rd-modal-corpo { padding: 16px; overflow: auto; }
.rd-modal-pe { padding: 12px 16px; border-top: 1px solid var(--linha); display: flex; gap: 8px; justify-content: flex-end; }
.rd-form { display: grid; gap: 10px; }
.rd-form label { display: grid; gap: 4px; font-size: 13px; color: var(--fraco); }
.rd-form input, .rd-form textarea, .rd-form select {
  background: var(--fundo2); border: 1px solid var(--linha); border-radius: var(--raio-p);
  padding: 9px 11px; color: var(--texto); font: inherit; min-height: 40px; width: 100%;
}
.rd-check { display: flex !important; flex-direction: row; align-items: center; gap: 8px; color: var(--texto); }
.rd-check input { width: auto; min-height: auto; }
.rd-sugestoes { display: grid; gap: 8px; }
.rd-sugestao {
  display: flex; gap: 10px; align-items: flex-start; background: var(--fundo2);
  border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 10px 12px;
}
.rd-sugestao b { display: block; font-size: 13.5px; }
.rd-sugestao small { color: var(--apagado); font-size: 11.5px; }
.rd-sugestao em { display: block; font-style: normal; color: var(--fraco); font-size: 12.5px; margin-top: 3px; }

/* -------------------------------------------------------------- no celular */
@media (max-width: 900px) {
  .rd-estudio { grid-template-columns: 1fr; }
  .rd-fila { position: static; }
  .rd-cards { max-height: none; }
  .rd-cartaz { grid-template-columns: 1fr; }
  .rd-cartaz-foto { max-width: 300px; margin: 0 auto; }
  .rd-grade { grid-template-columns: repeat(2, 1fr); }
  .rd-fila-mapa { grid-template-columns: repeat(2, 1fr); }
  .rd-pilar { grid-template-columns: 1fr; }
  .rd-formula-partes { grid-template-columns: 1fr; }
  .rd-notao small { max-width: 100%; margin-left: 0; }
}