/* Rapizza OS · panel v3 — estilos de Redes (redes.js). Prefijo rd-.
   Colores de datos (validados con la skill dataviz, claro y oscuro): alcance = --s1 (línea), vistas = --s2 (barras),
   días con publicación = --s3 (marcas del carril), magnitudes del almanaque y la constancia = rampa --seq-0…6.
   Instagram/Facebook en el reparto y seguidores/hogares en el cruce por barrio usan --s1/--s2, siempre con leyenda.
   Todo con los tokens de estilo.css: el tema oscuro sale solo. */

/* ───────────── frescura y encabezados ───────────── */
.rd-fresco { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; font-size: 13px; line-height: 1.45; color: var(--ink-2); margin-bottom: -4px; }
.rd-fresco .punto { margin-top: 6px; }
.rd-fresco-t { flex: 1 1 240px; min-width: 0; }
.rd-fresco-t b { color: var(--ink); font-weight: 600; }
.rd-fresco-a { margin: -3px 0 -3px auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--ink-2); padding: 4px 8px; border-radius: 8px; }
.rd-fresco-a:hover { background: var(--surface-2); color: var(--ink); }
.rd-fresco-a .ic:last-child { color: var(--ink-3); }
.rd-sec-t .ic { color: var(--ink-3); }
.rd-filtros { row-gap: 6px; }
.rd-rango { font-size: 13px; color: var(--ink-2); line-height: 1.45; min-width: 0; }
.rd-rango b { color: var(--ink); font-weight: 600; }
.rd-kpis-vacio { grid-column: 1 / -1; }

/* ───────────── héroe: reparto y seguidores nuevos ───────────── */
.rd-lado { padding: 16px 18px; border-radius: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.rd-lado-t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.rd-lado-t span:last-child:not(:first-child) { font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.rd-reparto { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; }
.rd-reparto i { display: block; min-width: 3px; }
.rd-reparto-ley { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-2); }
.rd-reparto-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.rd-reparto-ley b { color: var(--ink); }
.rd-reparto-ley + .rd-lado-t { margin-top: 10px; }
.rd-mini-barras { display: block; width: 100%; height: 56px; overflow: visible; }
.rd-mb { fill: var(--s1); pointer-events: none; }
.rd-mb-cero { fill: var(--line-2); pointer-events: none; }
.rd-mb-pista { fill: transparent; }
.rd-mb-pista:hover { fill: color-mix(in srgb, var(--ink) 7%, transparent); }
.rd-mini-eje { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rd-lado-spark { height: 56px; }

/* ───────────── gráfico de 28 días ───────────── */
.rd-g-ley { margin-bottom: 8px; }
.rd-ley-pub { width: 10px; height: 10px; border-radius: 3px; background: var(--s3); }
.rd-g-bar { fill: var(--s2); transition: opacity .12s; pointer-events: none; }
.rd-g-bar.g-hov { opacity: .72; }
.rd-g-bar--parcial { fill-opacity: .4; }
.rd-g-linea { stroke: var(--s1); pointer-events: none; }
.rd-g-punto, .rd-g-arriba { fill: var(--s1); pointer-events: none; }
.rd-g-corte { fill: none; stroke: var(--surface); stroke-width: 2.5; stroke-linecap: round; pointer-events: none; }
.rd-g-banda { fill: var(--surface-2); pointer-events: none; }
.rd-g-banda-t { fill: var(--ink-3); font-size: 11px; font-weight: 600; pointer-events: none; }
.rd-g-pub { color: var(--s3); pointer-events: none; }
.rd-g-pub rect { fill: color-mix(in srgb, var(--s3) 15%, var(--surface)); }
.rd-g-pub-p { fill: var(--s3); pointer-events: none; }
.rd-g-pub-n { fill: var(--ink-2); font-size: 10.5px; font-weight: 700; pointer-events: none; }
.rd-graf .g-hit[role="button"] { cursor: pointer; }
.rd-graf-nota .pie-nota { margin-top: 10px; }

/* ───────────── imágenes de Instagram (con respaldo si la URL venció) ───────────── */
.rd-img-caja { position: relative; display: block; overflow: hidden; background: var(--surface-2); color: var(--ink-3); }
.rd-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-img-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 4px; text-align: center; }
.rd-img-ph small { font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.rd-img-caja--rota { background: repeating-linear-gradient(135deg, var(--surface-2) 0 7px, color-mix(in srgb, var(--sunken) 70%, var(--surface-2)) 7px 14px); }
.rd-img-caja--rota .rd-img-ph .ic { color: var(--ink-2); }

/* ───────────── almanaque ───────────── */
.rd-cal-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.rd-cal-barra .pnav-l { min-width: 150px; }
.rd-cal-ir select { max-width: 280px; }
.rd-cal-res { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; margin-bottom: 12px; }
.rd-cal-res b { color: var(--ink); }
.rd-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.rd-cal-d { font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-align: center; padding-bottom: 2px; text-transform: capitalize; }
.rd-cal-c {
  position: relative; min-width: 0; min-height: 92px; padding: 7px 8px; border: 0; border-radius: 10px; background: var(--seq-0);
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px; text-align: left; color: var(--ink); font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rd-cal-c:hover:not(:disabled) { outline: 2px solid var(--ink); outline-offset: 1px; }
.rd-cal-c:disabled { cursor: default; }
.rd-cal-c[data-n="1"], .rd-sem-d[data-n="1"], .rd-cal-ley i[data-n="1"] { background: var(--seq-1); }
.rd-cal-c[data-n="2"], .rd-sem-d[data-n="2"], .rd-cal-ley i[data-n="2"] { background: var(--seq-2); }
.rd-cal-c[data-n="3"], .rd-sem-d[data-n="3"], .rd-cal-ley i[data-n="3"] { background: var(--seq-3); }
.rd-cal-c[data-n="4"], .rd-sem-d[data-n="4"], .rd-cal-ley i[data-n="4"] { background: var(--seq-4); }
.rd-cal-c[data-n="5"], .rd-sem-d[data-n="5"], .rd-cal-ley i[data-n="5"] { background: var(--seq-5); }
.rd-cal-c[data-n="6"], .rd-sem-d[data-n="6"], .rd-cal-ley i[data-n="6"] { background: var(--seq-6); }
.rd-cal-c[data-n="4"], .rd-sem-d[data-n="4"] { color: var(--seq-tx-4); }
.rd-cal-c[data-n="5"], .rd-sem-d[data-n="5"] { color: var(--seq-tx-5); }
.rd-cal-c[data-n="6"], .rd-sem-d[data-n="6"] { color: var(--seq-tx-6); }
.rd-cal-c--hoy, .rd-sem-d--hoy { box-shadow: inset 0 0 0 2px var(--ink); }
.rd-cal-c--fut { opacity: .45; }
.rd-cal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; min-width: 0; }
.rd-cal-n { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-cal-a { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rd-cal-a--pend { opacity: .7; }
.rd-cal-pubs { display: flex; flex-wrap: wrap; gap: 3px; align-items: flex-end; min-width: 0; }
.rd-cal-mini { flex: none; width: 28px; height: 28px; border-radius: 6px; box-shadow: 0 0 0 1.5px var(--surface); }
.rd-cal-mas { font-size: 11px; font-weight: 700; align-self: center; }
.rd-cal-cnt { display: none; }
.rd-cal-ley { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; font-size: 12px; color: var(--ink-3); }
.rd-cal-ley-g { display: inline-flex; align-items: center; gap: 4px; }
.rd-cal-ley-g > span:first-child { margin-right: 4px; }
.rd-cal-ley i[data-n] { width: 18px; height: 10px; border-radius: 2px; }
.rd-cal-ley-n { font-variant-numeric: tabular-nums; margin: 0 2px; }
.rd-cal-ley-hoy { width: 14px; height: 14px; border-radius: 4px; background: var(--seq-0); box-shadow: inset 0 0 0 2px var(--ink); margin-right: 2px; }
.rd-cal-ley-x { flex-basis: 100%; line-height: 1.45; }

/* lista por semana (el almanaque en el teléfono) */
.rd-sems { display: flex; flex-direction: column; gap: 12px; }
.rd-sem { border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; }
.rd-sem-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin-bottom: 10px; }
.rd-sem-cab b { font-size: 14px; }
.rd-sem-cab span { font-size: 12.5px; color: var(--ink-3); }
.rd-sem-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rd-sem-d {
  position: relative; min-width: 0; min-height: 48px; padding: 4px 0; border: 0; border-radius: 8px; background: var(--seq-0); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rd-sem-d span { font-size: 10.5px; font-weight: 600; opacity: .8; }
.rd-sem-d b { font-size: 14px; font-variant-numeric: tabular-nums; }
.rd-sem-d--fuera { opacity: .5; }
.rd-sem-d:disabled { opacity: .3; cursor: default; }
.rd-sem-pto { position: absolute; top: 3px; right: 3px; min-width: 8px; height: 8px; border-radius: 999px; background: var(--s3); box-shadow: 0 0 0 1.5px var(--surface); font-style: normal; }
.rd-sem-pto:not(:empty) { min-width: 15px; height: 15px; padding: 0 3px; font: 700 9.5px/15px var(--f-texto); color: #1A1210; text-align: center; }
.rd-sem-pubs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-sem-pub { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rd-sem-pub:hover { background: var(--surface-2); }
.rd-sem-pub > .ic { flex: none; color: var(--ink-3); }
.rd-sem-mini { flex: none; width: 44px; height: 44px; border-radius: 8px; }
.rd-sem-pt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rd-sem-pt b { font-size: 13.5px; font-weight: 600; }
.rd-sem-pt small { font-size: 12.5px; color: var(--ink-3); }

/* ───────────── cajón de un día / una publicación ───────────── */
.rd-dia { display: flex; flex-direction: column; gap: 22px; }
.rd-sec h3 { display: flex; align-items: center; gap: 8px; font: 600 14.5px/1.3 var(--f-texto); margin-bottom: 10px; }
.rd-sec h3 .ic { color: var(--ink-3); }
.rd-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rd-dato {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-areas: "ic t" "v v" "s s"; column-gap: 6px; align-items: center;
  align-content: start; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); min-width: 0;
}
.rd-dato .ic { grid-area: ic; color: var(--ink-3); }
.rd-dato span { grid-area: t; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.rd-dato b { grid-area: v; font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin-top: 3px; }
.rd-dato small { grid-area: s; font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.rd-ventas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rd-venta { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); min-width: 0; }
.rd-venta > span { display: flex; flex-direction: column; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; }
.rd-venta > span small { font-size: 11.5px; color: var(--ink-3); }
.rd-venta > b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.rd-venta > small { font-size: 12px; color: var(--ink-3); }
.rd-ventas-d { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: 13.5px; color: var(--ink-2); }
.rd-ventas-x { font-size: 13.5px; color: var(--ink-2); }
.rd-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.rd-link:hover { text-decoration: underline; }

.rd-pub { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.rd-pub + .rd-pub { margin-top: 10px; }
.rd-pub-img { display: block; align-self: start; border-radius: 10px; overflow: hidden; text-decoration: none; }
.rd-pub-img .rd-img-caja { width: 100%; aspect-ratio: 1; }
.rd-pub--grande { grid-template-columns: minmax(0, 1fr); padding: 0; border: 0; }
.rd-pub--grande .rd-pub-img { width: 100%; max-width: 420px; }
.rd-pub-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.rd-pub-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rd-pub-f { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rd-pub-tx { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.rd-pub-tx--corto { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rd-pub--abierto .rd-pub-tx--corto, .rd-pub--grande .rd-pub-tx--corto { display: block; -webkit-line-clamp: unset; overflow: visible; }
.rd-pub-mas { align-self: flex-start; font-size: 13px; margin-top: -4px; }
.rd-pub-met { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin: 0; }
.rd-pub-met div { padding: 6px 8px; border-radius: 8px; background: var(--surface-2); min-width: 0; }
.rd-pub-met dt { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-pub-met dd { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rd-pub-idx { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.rd-pub-idx .ic { flex: none; margin-top: 1px; color: var(--ink-3); }
.rd-pub-idx small { font-size: 12px; color: var(--ink-3); }
.rd-pub-ig { align-self: flex-start; }
.rd-pub-ig .ic:last-child { color: var(--ink-3); }

/* ───────────── publicaciones (grilla) ───────────── */
.rd-pubs-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rd-pubs-barra .filtro-chips { flex: 1 1 auto; min-width: 0; }
.rd-top-t { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); margin-bottom: 12px; }
.rd-top-t .ic { color: var(--warn); flex: none; }
.rd-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.rd-card {
  display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.rd-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--line-2); }
.rd-card--top { border-color: color-mix(in srgb, var(--accent) 75%, var(--line)); }
.rd-card-img { position: relative; display: block; aspect-ratio: 1; }
.rd-card-img > .rd-img-caja { position: absolute; inset: 0; }
.rd-card-tipo {
  position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 6px; border-radius: 999px;
  background: rgba(15, 11, 10, .66); color: #fff; font: 600 11.5px/1 var(--f-texto); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.rd-card-puesto {
  position: absolute; right: 8px; top: 8px; min-width: 32px; height: 28px; padding: 0 7px; border-radius: 7px; background: var(--accent); color: #1A1210;
  font: 400 17px/28px var(--f-titulo); letter-spacing: .02em; text-align: center; box-shadow: 2px 2px 0 var(--brand-deep);
}
.rd-card-cuerpo { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 12px; min-width: 0; }
.rd-card-f { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rd-card-met { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.rd-card-met > span { display: flex; flex-direction: column; min-width: 0; }
.rd-card-met b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.rd-card-met small { font-size: 11px; color: var(--ink-3); }
.rd-card-met--on b { color: var(--brand-tx, var(--brand)); }
.rd-card-tx { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rd-pubs-mas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 14px; font-size: 13px; color: var(--ink-3); }

/* ───────────── qué funciona ───────────── */
.rd-hz { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.rd-hz-it {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "ic t" "ic c"; gap: 6px 12px; align-content: start;
  padding: 14px 16px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sombra); border: var(--borde-card);
}
.rd-hz-it--bien { --c: var(--good-tx); }
.rd-hz-it--atencion { --c: var(--warn-tx); }
.rd-hz-it--neutro { --c: var(--info-tx); }
.rd-hz-ic { grid-area: ic; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: var(--c); }
.rd-hz-t { grid-area: t; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rd-hz-t b { color: var(--ink); }
.rd-hz-c { grid-area: c; }
.rd-hz-carga { margin-top: 8px; }

.rd-fmt { display: flex; flex-direction: column; }
.rd-fmt-f {
  display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 1.6fr) auto; grid-template-areas: "n b e" "n d e";
  gap: 4px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line);
}
.rd-fmt-f:first-child { border-top: 0; padding-top: 0; }
.rd-fmt-n { grid-area: n; display: flex; align-items: center; gap: 10px; min-width: 0; }
.rd-fmt-n .ic { flex: none; color: var(--ink-3); }
.rd-fmt-n > span { display: flex; flex-direction: column; min-width: 0; }
.rd-fmt-n b { font-size: 14.5px; }
.rd-fmt-n small { font-size: 12px; color: var(--ink-3); }
.rd-fmt-b { grid-area: b; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rd-fmt-pista { display: block; flex: 1; min-width: 40px; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.rd-fmt-pista i { display: block; height: 100%; border-radius: 4px; background: var(--s1); }
.rd-fmt-v { font-size: 13px; color: var(--ink-2); }
.rd-fmt-v b { font-size: 14px; color: var(--ink); }
.rd-fmt-d { grid-area: d; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: var(--ink-3); }
.rd-fmt-d b { color: var(--ink-2); }
.rd-fmt-e { grid-area: e; display: flex; flex-direction: column; align-items: flex-end; min-width: 88px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); text-align: right; }
.rd-fmt-e b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-fmt-e small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.rd-fmt-e--alto { background: color-mix(in srgb, var(--good) 12%, var(--surface)); }
.rd-fmt-e--alto b { color: var(--good-tx); }
.rd-fmt-e--bajo b { color: var(--bad-tx); }
.rd-fmt-nota { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.rd-fmt-nota + .pie-nota { margin-top: 6px; }

.rd-hs { display: flex; flex-direction: column; gap: 6px; }
.rd-hs-fila { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: end; }
.rd-hs-t { align-self: center; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.rd-hs-barras { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; height: 64px; align-items: end; }
.rd-hs-c { position: relative; height: 100%; display: flex; align-items: flex-end; border-radius: 4px; }
.rd-hs-c i { display: block; width: 100%; border-radius: 3px 3px 0 0; }
.rd-hs-c--rec { background: color-mix(in srgb, var(--s3) 13%, transparent); }
.rd-hs-c:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.rd-hs-eje .rd-hs-barras { height: auto; }
.rd-hs-eje span { font-size: 10.5px; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.rd-hs-rec { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 114px; font-size: 12.5px; color: var(--ink-3); }
.rd-hs-rec i { width: 14px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--s3) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3) 50%, transparent); }
.rd-frases { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rd-frases li { position: relative; padding-left: 18px; }
.rd-frases li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
.rd-frases b { color: var(--ink); }
.rd-dow { margin-top: 16px; display: flex; flex-direction: column; }
.rd-dow-cab, .rd-dow-f { display: grid; grid-template-columns: 88px minmax(0, 1fr) 76px 60px; gap: 10px; align-items: center; }
.rd-dow-cab { padding: 0 0 6px; border-bottom: 1px solid var(--line-2); font: 600 11.5px/1.2 var(--f-texto); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.rd-dow-cab span:nth-child(n+3) { text-align: right; }
.rd-dow-f { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.rd-dow-f:last-child { border-bottom: 0; }
.rd-dow-f--max .rd-dow-n { font-weight: 700; }
.rd-dow-p { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rd-dow-p small { flex: none; min-width: 36px; text-align: right; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rd-dow-q, .rd-dow-i { text-align: right; font-variant-numeric: tabular-nums; }
.rd-dow-i { font-weight: 600; }

.rd-const-caja { min-width: 0; }
.rd-const, .rd-const-meses { display: grid; grid-template-columns: repeat(52, minmax(0, 1fr)); gap: 3px; }
.rd-const-c { min-width: 0; aspect-ratio: 1 / 1.6; border-radius: 3px; background: var(--seq-0); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-2) 60%, transparent); }
.rd-const-c[data-n="1"] { background: var(--seq-3); box-shadow: none; }
.rd-const-c[data-n="2"] { background: var(--seq-5); box-shadow: none; }
.rd-const-c[data-h] { box-shadow: inset 0 -3px 0 var(--s3); }
.rd-const-meses { margin-top: 5px; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.rd-const-meses span { grid-row: 1; overflow: visible; }
.rd-const-ley { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.rd-const-ley span { display: inline-flex; align-items: center; gap: 6px; }
.rd-const-ley i { width: 10px; height: 14px; border-radius: 2px; background: var(--seq-0); box-shadow: inset 0 0 0 1px var(--line-2); }
.rd-const-ley i[data-n="1"] { background: var(--seq-3); box-shadow: none; }
.rd-const-ley i[data-n="2"] { background: var(--seq-5); box-shadow: none; }

/* ───────────── audiencia ───────────── */
.rd-barras { display: flex; flex-direction: column; gap: 8px; }
.rd-barras-f { display: grid; grid-template-columns: 52px minmax(0, 1fr) 96px; gap: 10px; align-items: center; font-size: 13.5px; }
.rd-barras-n { font-weight: 600; font-variant-numeric: tabular-nums; }
.rd-barras-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-barras-v small { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.rd-genero { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

.rd-bar-ley { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; font-size: 12.5px; color: var(--ink-2); }
.rd-bar-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.rd-brr { display: flex; flex-direction: column; }
.rd-brr-f {
  display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(0, 1.6fr) 132px 160px; grid-template-areas: "n b r c";
  gap: 6px 18px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line);
}
.rd-brr-f:first-child { border-top: 0; }
.rd-brr-n { grid-area: n; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-brr-n b { font-size: 14px; }
.rd-brr-n small { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.rd-brr-b { grid-area: b; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rd-brr-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rd-brr-l em { flex: none; min-width: 42px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rd-brr-r { grid-area: r; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.rd-brr-r b { font-size: 17px; font-variant-numeric: tabular-nums; }
.rd-brr-r small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.rd-brr-c { grid-area: c; justify-self: end; }

/* ───────────── Facebook ───────────── */
.rd-fb-g { display: grid; grid-template-columns: minmax(180px, .6fr) minmax(0, 1.4fr); gap: 20px; align-items: start; }
.rd-fb-n { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rd-fb-n b { font: 600 34px/1.05 var(--f-texto); letter-spacing: -.02em; }
.rd-fb-n span { font-size: 13.5px; color: var(--ink-2); }
.rd-fb-n small { font-size: 12.5px; color: var(--ink-3); }
.rd-fb-x { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rd-fb-pasos { font-size: 13.5px; color: var(--ink-2); }
.rd-fb-pasos summary { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; padding: 4px 0; }
.rd-fb-pasos summary::-webkit-details-marker { display: none; }
.rd-fb-pasos summary .ic { color: var(--ink-3); }
.rd-fb-pasos ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; }

/* ───────────── operación de redes (plegable) ───────────── */
.rd-op { padding: 0; }
.rd-op-h { margin: 0; font: inherit; }
.rd-op-cab {
  width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) 24px; gap: 12px; align-items: center; padding: 16px 20px;
  border: 0; border-radius: var(--r-card); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.rd-op-cab:hover { background: var(--surface-2); }
.rd-op-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--s5) 12%, var(--surface)); color: var(--s5); }
.rd-op-tit { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-op-tit b { font-size: 16px; font-weight: 600; }
.rd-op-tit small { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.rd-op-alerta { color: var(--bad-tx); }
.rd-op-chev { display: grid; place-items: center; color: var(--ink-3); transition: transform .18s ease; }
.rd-op--abierta .rd-op-chev { transform: rotate(180deg); color: var(--ink); }
.rd-op-c { padding: 4px 20px 20px; }
.rd-op-g { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px 28px; align-items: start; }
.rd-op-s { min-width: 0; }
.rd-op-s:first-child { grid-row: span 2; }
.rd-op-s h3 { font: 600 14.5px/1.3 var(--f-texto); }
.rd-op-s > .panel-sub { margin: 4px 0 12px; }
.rd-convs { display: flex; flex-direction: column; gap: 10px; }
.rd-conv { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 12px 16px; border: 1px solid var(--line); border-radius: 12px; }
.rd-conv::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--warn); }
.rd-conv--queja::before { background: var(--bad); }
.rd-conv-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; }
.rd-conv-cab .ic { color: var(--ink-3); }
.rd-conv-cab span { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.rd-conv-t { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.rd-conv-r { font-size: 13px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.rd-conv-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--ink-3); }
.rd-conv-pie .btn { margin-left: auto; }
.rd-op-det { margin-top: 12px; }
.rd-op-det summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 4px 0; }
.rd-op-det .rd-convs { margin-top: 8px; }
.rd-op-modo { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.rd-op-modo .ic { flex: none; margin-top: 1px; color: var(--ink-3); }
.rd-inactiva td { color: var(--ink-3); }

/* ───────────── anchos medianos ───────────── */
@media (max-width: 1180px) {
  .rd-cal-c { min-height: 80px; }
  .rd-cal-mini { width: 24px; height: 24px; }
  .rd-brr-f { grid-template-columns: minmax(150px, 1fr) minmax(0, 1.4fr) 128px; grid-template-areas: "n b r" "n b c"; }
}
@media (max-width: 900px) {
  .rd-op-g { grid-template-columns: minmax(0, 1fr); }
  .rd-op-s:first-child { grid-row: auto; }
  .rd-fb-g { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rd-cal-c { min-height: 68px; padding: 6px; }
  .rd-cal-a { font-size: 10.5px; }
}

/* ───────────── teléfono ───────────── */
@media (max-width: 767.98px) {
  .rd-fresco { font-size: 12.5px; }
  .rd-fresco-a { margin-left: 0; padding: 4px 0; }
  .rd-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-dato b { font-size: 18px; }
  .rd-pub { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .rd-pub--grande { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .rd-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rd-card-cuerpo { padding: 8px 10px 10px; gap: 6px; }
  /* en el teléfono entran dos cifras: alcance y la del orden elegido (interacciones o tasa) */
  .rd-card-met { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-card-met > span:nth-child(3):not(.rd-card-met--on) { display: none; }
  .rd-card-met:has(> span:nth-child(3).rd-card-met--on) > span:nth-child(2) { display: none; }
  .rd-card-met b { font-size: 14px; }
  .rd-card-met small { font-size: 11px; }
  .rd-card-tx { display: none; }
  .rd-card-tipo { left: 6px; top: 6px; padding: 3px 6px 3px 5px; font-size: 10.5px; }
  .rd-card-puesto { right: 6px; top: 6px; min-width: 28px; height: 24px; font-size: 15px; line-height: 24px; }
  .rd-pubs-barra .rd-orden, .rd-pubs-barra .rd-orden select { width: 100%; }
  .rd-hz { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rd-hz-it { padding: 12px 14px; }
  .rd-fmt-f { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n e" "b b" "d d"; gap: 8px 12px; }
  .rd-hs-fila { grid-template-columns: 70px minmax(0, 1fr); gap: 8px; }
  .rd-hs-t { font-size: 11.5px; line-height: 1.25; }
  .rd-hs-barras { gap: 2px; height: 56px; }
  .rd-hs-rec { margin-left: 78px; }
  .rd-dow-cab, .rd-dow-f { grid-template-columns: 76px minmax(0, 1fr) 64px 48px; gap: 8px; }
  .rd-dow-cab { font-size: 10.5px; }
  .rd-const, .rd-const-meses { gap: 1px; }
  .rd-const-c { border-radius: 2px; aspect-ratio: 1 / 2.4; }
  .rd-const-meses { font-size: 9.5px; }
  .rd-barras-f { grid-template-columns: 46px minmax(0, 1fr) 84px; gap: 8px; }
  .rd-brr-f { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n n" "b b" "c r"; gap: 8px 12px; }
  .rd-brr-c { justify-self: start; }
  .rd-op-cab { padding: 14px 16px; gap: 10px; }
  .rd-op-c { padding: 4px 16px 16px; }
  .rd-conv-pie .btn { margin-left: 0; }
  /* almanaque en modo mes: número y cantidad de publicaciones (las miniaturas no entran) */
  .rd-cal { gap: 3px; }
  .rd-cal-d { font-size: 10.5px; }
  .rd-cal-c { min-height: 50px; padding: 5px; border-radius: 8px; gap: 2px; }
  .rd-cal-n { font-size: 12px; }
  .rd-cal-a, .rd-cal-pubs { display: none; }
  .rd-cal-cnt { display: grid; place-items: center; align-self: flex-end; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--s3); color: #1A1210; font: 700 10px/16px var(--f-texto); box-shadow: 0 0 0 1.5px var(--surface); }
  .rd-cal-barra .pnav { flex: 1 1 100%; }
  .rd-cal-barra .rd-cal-ir, .rd-cal-barra .rd-cal-ir select { flex: 1 1 auto; max-width: none; width: 100%; }
}
@media (max-width: 380px) {
  .rd-grilla { gap: 8px; }
}

@media (forced-colors: active) {
  .rd-g-bar, .rd-cal-c, .rd-sem-d, .rd-const-c, .rd-hs-c i, .rd-fmt-pista i, .rd-reparto i, .rd-mb { forced-color-adjust: none; }
}