/* Validus — capa de marca sobre parrilla-engine.css. Sólo aditivo. */

@font-face {
  font-family: "Boston";
  src: url("assets/fonts/boston-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Boston";
  src: url("assets/fonts/boston-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Boston";
  src: url("assets/fonts/boston-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Boston";
  src: url("assets/fonts/boston-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --pg-display: "Boston", "Arial Narrow", Impact, sans-serif;
}

/* ---------- tipografía de titulares ---------- */

.pg-hero h1,
.pg-identity h2,
.pg-crossmap h2,
.pg-modal-heading,
.pg-pillar-card h3,
.pg-stat strong,
.pg-detail-card h3 {
  font-family: var(--pg-display);
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-weight: 600;
}

.pg-hero h1 {
  font-weight: 600;
  line-height: 0.9;
}

/* ---------- identidad ---------- */

.pg-identity {
  margin: 0 0 40px;
  padding: 34px 0 0;
  border-top: 1px solid var(--pg-line);
}

.pg-identity[hidden] {
  display: none;
}

.pg-identity-head {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-bottom: 26px;
}

.pg-identity-logo {
  width: 74px;
  height: 74px;
  flex: none;
  object-fit: contain;
}

.pg-identity h2 {
  margin: 6px 0 8px;
  font-size: clamp(28px, 4vw, 44px);
}

.pg-identity-head p {
  margin: 0;
  max-width: 68ch;
  color: var(--pg-text-dim);
  font-size: 14px;
  line-height: 1.6;
}

.pg-moodboard {
  border: 1px solid var(--pg-line);
  border-radius: 22px;
  overflow: hidden;
  background: var(--pg-surface);
}

.pg-moodboard img {
  display: block;
  width: 100%;
  height: auto;
}

.pg-palette {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}

.pg-tone {
  border: 1px solid var(--pg-line);
  border-radius: 14px;
  padding: 12px;
  background: var(--pg-surface);
}

.pg-tone-chip {
  display: block;
  height: 42px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
}

.pg-tone b {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.pg-tone small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--pg-text-dim);
  font-variant-numeric: tabular-nums;
}

.pg-product-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}

.pg-product {
  margin: 0;
  border: 1px solid var(--pg-line);
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(180deg, var(--pg-surface), var(--pg-bg));
  text-align: center;
}

.pg-product img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55));
}

.pg-product figcaption {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pg-text-dim);
}

/* ---------- pilares ---------- */

.pg-pillars-head {
  margin: 42px 0 18px;
}

.pg-pillars-head h2 {
  margin: 6px 0 0;
  font-size: clamp(26px, 3.4vw, 40px);
}

.pg-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pg-pillar-card {
  min-height: 214px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--pg-line);
  border-radius: 18px;
  padding: 22px;
  background: linear-gradient(165deg, var(--pg-surface), var(--pg-surface-2));
}

/* las tarjetas de pilar se pintan en el sistema de color, al final del archivo */

.pg-pillar-card small {
  color: var(--pg-accent);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.pg-pillar-card h3 {
  font-weight: 600;
  margin: 8px 0;
  font-size: clamp(20px, 2vw, 27px);
  letter-spacing: 0.02em;
  overflow-wrap: break-word;
}

.pg-pillar-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #c3beb5;
}

/* ---------- detalle: claim, hook, guion, CTA, stories ---------- */

.pg-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.pg-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--pg-line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  background: var(--pg-surface);
}

.pg-meta-chip b {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pg-accent);
}

.pg-claim-block {
  margin: 16px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--pg-accent-dim);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(190, 150, 88, 0.07), transparent);
}

.pg-claim {
  font-family: var(--pg-display);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.08;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--pg-text);
}

.pg-hook {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pg-sand, #d9c9b1);
}

.pg-hook span {
  display: block;
  margin-bottom: 4px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pg-accent);
}

.pg-guion {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.pg-guion li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--pg-line);
  border-radius: 13px;
  padding: 13px 14px;
  background: var(--pg-surface);
}

.pg-guion-t {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pg-accent);
  padding-top: 2px;
}

.pg-guion li p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #c7c1b7;
}

.pg-cta-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--pg-line);
  border-radius: 14px;
  background: var(--pg-surface);
  font-size: 14px;
}

.pg-cta-block span {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pg-accent);
}

.pg-stories {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.pg-stories li {
  font-size: 13px;
  line-height: 1.55;
  color: #c7c1b7;
}

@media (max-width: 1080px) {
  .pg-pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-palette { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .pg-palette { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-pillar-grid { grid-template-columns: 1fr; }
  .pg-pillar-card { min-height: 0; }
  .pg-identity-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pg-guion li { grid-template-columns: 1fr; gap: 6px; }
  .pg-product img { height: 170px; }
}


/* ---------- ficha de identidad en el selector ---------- */

.pg-ficha-btn small {
  color: var(--pg-accent);
}

.pg-ficha-btn.active small {
  color: inherit;
}

/* El atributo [hidden] pierde contra las reglas display:grid/flex del engine */
#pg-identity[hidden],
#pg-pillars[hidden],
#pg-view-toggle[hidden],
#pg-stats[hidden],
#pg-controls[hidden],
#pg-crossmap[hidden] {
  display: none !important;
}

/* Facebook debe mostrar la MISMA proporción que Instagram: es el mismo asset.
   Verticales (Reel, Reel/Ad, Guía UGC) a 9:16; Carrusel y Estático a 1:1. */
.mock-fb-visual {
  min-height: 0;
  aspect-ratio: 1 / 1;
}

.mock-fb-visual.vertical {
  min-height: 0;
  width: min(270px, 100%);
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
}

/* ---------- Reels / TikTok: cromo real sobre el lienzo vertical ---------- */

.mock-vertical {
  isolation: isolate;
}

.mock-vertical::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
  pointer-events: none;
  z-index: 1;
}

.mock-vtop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 0;
}

.mock-vtop-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pg-ig-text);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.mock-vstory-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mock-avatar.sm {
  width: 26px;
  height: 26px;
  font-size: 0.68rem;
}

.mock-vrail {
  position: absolute;
  right: 10px;
  bottom: 108px;
  z-index: 3;
  display: grid;
  gap: 17px;
  justify-items: center;
}

.mock-vrail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  line-height: 1;
  color: var(--pg-ig-text);
  cursor: pointer;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.75));
}

.mock-vrail-item svg {
  display: block;
  width: 25px;
  height: 25px;
  flex: none;
}

.mock-vrail-item b {
  font-size: 0.6rem;
  font-weight: 600;
}

.mock-vrail-item.like.active svg {
  fill: var(--pg-ig-heart);
  stroke: var(--pg-ig-heart);
}

.mock-vbottom {
  position: absolute;
  left: 0;
  right: 58px;
  bottom: 0;
  z-index: 3;
  display: grid;
  gap: 7px;
  padding: 0 14px 14px;
  text-align: left;
}

.mock-vuser {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mock-vfollow {
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 7px;
  padding: 2px 9px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--pg-ig-text);
}

.mock-vaudio {
  font-size: 0.62rem;
  color: var(--pg-ig-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-vertical .mock-vertical-caption {
  position: static;
  padding: 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--pg-ig-text);
  text-align: left;
}

.mock-vertical .mock-vertical-center {
  position: relative;
  z-index: 2;
  padding: 0 62px 0 14px;
}

.mock-vertical .mock-vertical-caption {
  background: none;
}

.mock-vertical.tiktok .mock-vfollow {
  border-color: #fe2c55;
  color: #fe2c55;
}

/* ---------- arte real dentro del mock ---------- */

.mock-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.mock-ig-image.has-art,
.mock-fb-visual.has-art {
  position: relative;
  overflow: hidden;
}

.mock-ig-image.has-art .mock-ig-image-text,
.mock-fb-visual.has-art {
  color: transparent;
  font-size: 0;
}

.mock-vertical.has-art .mock-vertical-center {
  display: none;
}


/* =====================================================================
   VALIDUS · COLOR COMO SUPERFICIE
   Base #0D0D0F. Todo par texto/fondo >= 4.5:1 (AA).
   Los seis pilares se separan por matiz y por luminancia. Knowledge y Lifestyle
   viven en el salvia de la marca (el mismo verde de la línea Fuerza sostenida),
   no en azul: el azul no está en la paleta de Validus y rompía el registro cálido.
   PILAR  -> pinta ÁREA        (superficie sólida + punto de tinta)
   TIPO   -> nunca pinta área  (placa casi negra, borde y texto teñidos)
   ESTADO -> píldora sólida    (rampa ordinal de luminancia)
   ===================================================================== */

:root {
  --vd-product-surf: #42291D;     --vd-product-ink: #B8AAA1;
  --vd-knowledge-surf: #22322A;   --vd-knowledge-ink: #A6BCA9;
  --vd-brand-surf: #755E3A;       --vd-brand-ink: #E0CFB4;
  --vd-lifestyle-surf: #4C6350;   --vd-lifestyle-ink: #C0D0BF;
  --vd-performance-surf: #59534B; --vd-performance-ink: #DDD5CA;
  --vd-conversion-surf: #905036;  --vd-conversion-ink: #D6BAAA;

  --vd-on-surf: #F2EDE6;
  --vd-on-surf-dim: #E7DFD4;

  --vd-surf: var(--pg-surface-2, #1A1A1C);
  --vd-ink: var(--pg-text-dim, #AAA49B);

  --vd-plate: rgba(13, 13, 15, 0.72);
  --vd-t-reel: #DBC6A6;
  --vd-t-carrusel: #B5BFC7;
  --vd-t-estatico: #D7CEC2;
  --vd-t-ugc: #CEAB9A;
  --vd-t-ad: #F2EDE6;

  --vd-s1-bg: #1A1A1C; --vd-s1-fg: #B6A995;
  --vd-s2-bg: #2C2C2E; --vd-s2-fg: #D9C9B1;
  --vd-s3-bg: #6A3F2B; --vd-s3-fg: #F2EDE6;
  --vd-s4-bg: #905036; --vd-s4-fg: #F2EDE6;
  --vd-s5-bg: #BE9658; --vd-s5-fg: #0D0D0F;
  --vd-s6-bg: #F2EDE6; --vd-s6-fg: #0D0D0F;
}

/* ---- 1. enlace único: cualquier elemento con data-pillar hereda su par ---- */
[data-pillar="product"]     { --vd-surf: var(--vd-product-surf);     --vd-ink: var(--vd-product-ink); }
[data-pillar="knowledge"]   { --vd-surf: var(--vd-knowledge-surf);   --vd-ink: var(--vd-knowledge-ink); }
[data-pillar="brand"],
[data-pillar="marca"]       { --vd-surf: var(--vd-brand-surf);       --vd-ink: var(--vd-brand-ink); }
[data-pillar="lifestyle"]   { --vd-surf: var(--vd-lifestyle-surf);   --vd-ink: var(--vd-lifestyle-ink); }
[data-pillar="performance"] { --vd-surf: var(--vd-performance-surf); --vd-ink: var(--vd-performance-ink); }
[data-pillar="conversion"]  { --vd-surf: var(--vd-conversion-surf);  --vd-ink: var(--vd-conversion-ink); }

/* puente al token agnóstico del motor */
[data-pillar] { --pg-pillar-ink: var(--vd-ink); --pg-pillar-surf: var(--vd-surf); }

/* ---- 2. badge de pilar: el único badge que pinta área ---- */
.pg-pillar {
  gap: 6px;
  border-color: color-mix(in srgb, var(--vd-ink) 42%, transparent);
  background: var(--vd-surf);
  color: var(--vd-on-surf);
}

.pg-pillar::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vd-ink);
}

/* ---- 3. tarjetas de identidad ---- */
.pg-pillar-card[data-pillar] {
  border-color: color-mix(in srgb, var(--vd-ink) 26%, transparent);
  background: linear-gradient(165deg, #161719 6%, var(--vd-surf));
}

.pg-pillar-card[data-pillar] small { color: var(--vd-ink); }
.pg-pillar-card[data-pillar] p { color: var(--vd-on-surf-dim); }

/* ---- 4. calendario ----
   La superficie del pilar se baja al 26 %: en una retícula de 30 celdas seis
   superficies llenas compiten entre sí y el número del día deja de leerse. El
   pilar sigue identificándose por la banda y por el rótulo del formato, que es
   el patrón que funciona en la parrilla de Cencali. */
.pg-cal-event[data-pillar] {
  border-left: 3px solid var(--vd-ink);
  background: color-mix(in srgb, var(--vd-surf) 26%, #101011);
}

.pg-cal-event[data-pillar]:hover {
  background: color-mix(in srgb, var(--vd-surf) 46%, #101011);
}

.pg-cal-event[data-pillar] strong,
.pg-cal-event[data-pillar] .pg-cal-ev-title { color: #F2ECE2; }
.pg-cal-event[data-pillar] .pg-cal-ev-type { color: var(--vd-ink); }
.pg-cal-event[data-pillar] span { color: var(--vd-on-surf-dim); }

.pg-cal-event[data-pillar] .pg-platform {
  border-color: color-mix(in srgb, var(--vd-ink) 34%, transparent);
  background: color-mix(in srgb, var(--vd-surf) 40%, transparent);
  color: #E6DFD3;
}

.pg-cal-event[data-pillar].interno {
  border-left-style: dashed;
  border-left-color: color-mix(in srgb, var(--vd-ink) 70%, #0D0D0F);
}

/* ---- 5. tabla: banda de pilar en la fila ---- */
.pg-table-view tbody tr[data-pillar] td:first-child { box-shadow: inset 4px 0 0 var(--vd-ink); }
.pg-table-view tbody tr[data-pillar]:hover { background: color-mix(in srgb, var(--vd-surf) 55%, transparent); }

/* ---- 6. chips y leyenda ---- */
.pg-chip[data-pillar].active {
  border-color: var(--vd-ink);
  background: var(--vd-surf);
  color: var(--vd-on-surf);
}

.pg-pillars-meta[data-pillar] { border-color: color-mix(in srgb, var(--vd-ink) 34%, transparent); }

.pg-pillars-meta[data-pillar]:hover {
  border-color: var(--vd-ink);
  background: var(--vd-surf);
  color: var(--vd-on-surf);
}

/* ---- 7. TIPO: placa casi negra, nunca superficie ---- */
.pg-type {
  border-color: color-mix(in srgb, currentColor 46%, transparent);
  background: var(--vd-plate);
  color: #AAA49B;
}

.pg-type.reel { color: var(--vd-t-reel); }
.pg-type.carrusel { color: var(--vd-t-carrusel); }
.pg-type.estatico { color: var(--vd-t-estatico); }
.pg-type.guia-ugc { color: var(--vd-t-ugc); }

.pg-type.reel-ad {
  border-color: var(--vd-t-ad);
  background: var(--vd-t-ad);
  color: #0D0D0F;
}

/* ---- 8. ESTADO: píldora sólida, rampa ordinal ---- */
.pg-status { gap: 5px; border-color: transparent; }

.pg-status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
}

.pg-status.idea { background: var(--vd-s1-bg); color: var(--vd-s1-fg); }
.pg-status.planificado { background: var(--vd-s2-bg); color: var(--vd-s2-fg); }
.pg-status.en-produccion { background: var(--vd-s3-bg); color: var(--vd-s3-fg); }
.pg-status.en-revision { background: var(--vd-s4-bg); color: var(--vd-s4-fg); }
.pg-status.aprobado { background: var(--vd-s5-bg); color: var(--vd-s5-fg); }
.pg-status.publicado { background: var(--vd-s6-bg); color: var(--vd-s6-fg); }

@media (prefers-reduced-transparency: reduce) {
  .pg-type { background: #0D0D0F; }
}

/* =====================================================================
   CONTROLES · segmented control real, no píldoras sueltas
   ===================================================================== */

.pg-mode-toggle {
  display: flex;
  /* Un segmented control no se parte ni se aplasta. El engine le hereda
     flex-wrap: wrap de una regla compartida con los chips, y en escritorio los
     filtros inline comparten su fila: al apretar, KANBAN caia a una segunda
     linea (visto en iPad horizontal, viewport 1024+). */
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 0;
}

.pg-mode-toggle .pg-mode-btn {
  border-radius: 0;
  margin-left: -1px;
  padding: 9px 20px;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pg-mode-toggle .pg-mode-btn:first-child {
  margin-left: 0;
  border-radius: 9px 0 0 9px;
}

.pg-mode-toggle .pg-mode-btn:last-child {
  border-radius: 0 9px 9px 0;
}

.pg-mode-toggle .pg-mode-btn.active {
  position: relative;
  z-index: 1;
}

.pg-filter-label::after {
  content: ":";
  opacity: 0.55;
}

.pg-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* =====================================================================
   KANBAN · tarjeta rica, arrastrable y clickeable
   ===================================================================== */

.pg-kb-col {
  transition: border-color 160ms ease, background 160ms ease;
}

.pg-kb-col h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.pg-kb-count {
  padding: 1px 8px;
  border: 1px solid var(--pg-line);
  border-radius: 999px;
  color: var(--pg-text-dim);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0;
}

.pg-kb-col.drop-target {
  border-color: var(--pg-accent);
  border-style: dashed;
  background: color-mix(in srgb, var(--pg-accent-dim) 30%, var(--pg-surface));
}

.pg-kb-col.drop-target .pg-kb-list::after {
  content: "";
  display: block;
  height: 46px;
  margin-top: 8px;
  border: 1px dashed var(--pg-accent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--pg-accent-dim) 24%, transparent);
}

.pg-kb-list {
  min-height: 64px;
}

.pg-kb-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 10px 11px 10px 15px;
  cursor: grab;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.pg-kb-card::before {
  content: "";
  position: absolute;
  inset: 9px auto 9px 6px;
  width: 3px;
  border-radius: 999px;
  background: var(--vd-ink, var(--pg-pillar-ink));
}

.pg-kb-card.linked:hover {
  border-color: color-mix(in srgb, var(--vd-ink) 55%, var(--pg-line));
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -14px var(--pg-shadow);
}

.pg-kb-card:active { cursor: grabbing; }

.pg-kb-card.dragging {
  opacity: 0.42;
  transform: rotate(-1deg) scale(0.99);
}

.pg-kb-art {
  grid-row: span 2;
  width: 46px;
  height: 58px;
  border: 1px solid var(--pg-line);
  border-radius: 7px;
  background: var(--pg-bg);
  object-fit: cover;
}

.pg-kb-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.pg-kb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pg-kb-chip {
  padding: 2px 7px;
  border: 1px solid var(--pg-line);
  border-radius: 5px;
  font-size: 0.55rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pg-kb-chip.tipo {
  border-color: color-mix(in srgb, currentColor 46%, transparent);
  background: var(--vd-plate);
  color: #AAA49B;
}

.pg-kb-chip.tipo[data-tipo="reel"] { color: var(--vd-t-reel); }
.pg-kb-chip.tipo[data-tipo="carrusel"] { color: var(--vd-t-carrusel); }
.pg-kb-chip.tipo[data-tipo="estatico"] { color: var(--vd-t-estatico); }
.pg-kb-chip.tipo[data-tipo="guia-ugc"] { color: var(--vd-t-ugc); }

.pg-kb-chip.tipo[data-tipo="reel-ad"] {
  border-color: var(--vd-t-ad);
  background: var(--vd-t-ad);
  color: #0D0D0F;
}

.pg-kb-chip.pilar {
  border-color: color-mix(in srgb, var(--vd-ink) 42%, transparent);
  background: var(--vd-surf);
  color: var(--vd-on-surf);
}

.pg-kb-chip.plat,
.pg-kb-chip.manual {
  color: var(--pg-text-dim);
}

.pg-kb-chip.manual { border-style: dashed; }

.pg-kb-title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  color: var(--pg-text);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.35;
}

.pg-kb-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.pg-kb-fecha {
  color: var(--pg-text-dim);
  font-size: 0.6rem;
  white-space: nowrap;
}

.pg-kb-sku {
  color: var(--pg-text-dim);
  font-size: 0.58rem;
  letter-spacing: 0.03em;
}

.pg-kanban-actions {
  grid-column: 1 / -1;
  opacity: 0;
  transition: opacity 140ms ease;
}

.pg-kb-card:hover .pg-kanban-actions,
.pg-kb-card:focus-within .pg-kanban-actions,
.pg-kb-card:focus-visible .pg-kanban-actions {
  opacity: 1;
}

.pg-kb-nota {
  margin: 12px 0 0;
  color: var(--pg-text-dim);
  font-size: 0.66rem;
}

/* Táctil: el arrastre HTML5 no existe. Los botones son la ruta real. */
@media (hover: none) {
  .pg-kanban-actions { opacity: 1; }
  .pg-kb-card { cursor: pointer; }
}

@media (max-width: 720px) {
  .pg-kanban-actions { opacity: 1; }
  .pg-mode-toggle .pg-mode-btn { padding: 8px 13px; }
}

/* =====================================================================
   THREADS · post de texto con media opcional
   ===================================================================== */

.mock-th {
  border: 1px solid var(--pg-ig-line);
  border-radius: 14px;
  padding: 15px 16px;
  background: #0a0a0a;
}

.mock-th-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
}

.mock-th-col {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.mock-th-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.mock-th-time {
  color: var(--pg-ig-dim);
  font-size: 0.66rem;
}

.mock-th-body {
  color: var(--pg-ig-text);
  font-size: 0.76rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.mock-th-media {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 5;
  place-items: center;
  overflow: hidden;
  padding: 22px;
  border: 1px solid var(--pg-ig-line);
  border-radius: 11px;
  background:
    radial-gradient(circle at 28% 20%, var(--pg-accent-dim), transparent 44%),
    linear-gradient(150deg, var(--pg-surface-2), var(--pg-bg));
  color: var(--pg-accent-soft);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.mock-th-media.has-art {
  padding: 0;
  color: transparent;
  font-size: 0;
}

.mock-th-actions {
  display: flex;
  gap: 17px;
  color: var(--pg-ig-text);
}

.mock-th-act {
  cursor: pointer;
  line-height: 0;
}

.mock-th-act svg {
  width: 19px;
  height: 19px;
}

.mock-th-act.like.active svg {
  fill: var(--pg-ig-heart);
  stroke: var(--pg-ig-heart);
}

.mock-th-meta {
  color: var(--pg-ig-dim);
  font-size: 0.66rem;
}

.mock-vaudio {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mock-vaudio svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/* el arte del carrusel tapa el texto de andamio de ese slide */
.mock-slide.has-art {
  position: relative;
  overflow: hidden;
}

.mock-slide.has-art .mock-slide-label,
.mock-slide.has-art .mock-slide-text {
  display: none;
}

/* =====================================================================
   FICHA DE IDENTIDAD · navegación interna y secciones
   ===================================================================== */

.pg-id-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin: 22px 0 8px;
  padding: 10px 0;
  background: linear-gradient(var(--pg-bg) 70%, transparent);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pg-id-nav::-webkit-scrollbar { display: none; }

.pg-id-nav-btn {
  flex: none;
  padding: 8px 15px;
  border: 1px solid var(--pg-line);
  border-radius: 999px;
  background: var(--pg-surface);
  color: var(--pg-text-dim);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

.pg-id-nav-btn:hover,
.pg-id-nav-btn:focus-visible {
  border-color: var(--pg-accent);
  color: var(--pg-accent-soft);
}

.pg-id-sec {
  scroll-margin-top: 62px;
  margin: 44px 0 0;
}

.pg-id-sec:focus { outline: none; }

.pg-id-sec-title {
  font-family: var(--pg-display);
  font-weight: 600;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  margin: 6px 0 18px;
}

.pg-pillar-card h4 {
  font-family: var(--pg-display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 27px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  margin: 8px 0;
}

/* ---- brandboard: superficie clickeable ---- */

.pg-brandboard {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--pg-line);
  border-radius: 20px;
  background: var(--pg-surface);
  cursor: zoom-in;
}

.pg-brandboard img {
  display: block;
  width: 100%;
  height: auto;
}

.pg-brandboard-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--pg-line);
  border-radius: 999px;
  background: rgba(13, 13, 15, 0.82);
  backdrop-filter: blur(8px);
  color: var(--pg-text);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pg-brandboard-hint svg { width: 13px; height: 13px; }

/* =====================================================================
   VISOR DEL BRANDBOARD
   ===================================================================== */

.pg-bb {
  position: fixed;
  z-index: 1400;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #08080a;
}

.pg-bb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pg-line);
  background: rgba(13, 13, 15, 0.92);
}

.pg-bb-title {
  overflow: hidden;
  color: var(--pg-text-dim);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-bb-tools {
  display: flex;
  align-items: center;
  flex: none;
  gap: 6px;
}

.pg-bb-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--pg-line);
  border-radius: 9px;
  background: var(--pg-surface);
  color: var(--pg-text);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.pg-bb-btn:hover,
.pg-bb-btn:focus-visible {
  border-color: var(--pg-accent);
  color: var(--pg-accent-soft);
}

.pg-bb-btn.close { font-size: 1.15rem; line-height: 1; }

.pg-bb-pct {
  min-width: 46px;
  color: var(--pg-text-dim);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.pg-bb-stage {
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 14px;
  touch-action: pan-x pan-y;
  overscroll-behavior: contain;
}

.pg-bb-stage.zoomed { cursor: grab; place-items: start; }

.pg-bb-stage img {
  max-width: 100%;
  height: auto;
  transform-origin: 0 0;
  transition: transform 120ms ease-out;
  border-radius: 10px;
}

.pg-bb-stage.zoomed img { max-width: none; width: 100%; }

.pg-bb-tip {
  margin: 0;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--pg-line);
  color: var(--pg-text-dim);
  font-size: 0.64rem;
  text-align: center;
}

/* en horizontal la barra estorba: se encoge y el lienzo gana alto */
@media (orientation: landscape) and (max-height: 520px) {
  .pg-bb-bar { padding: 6px 10px; }
  .pg-bb-btn { height: 30px; min-width: 30px; }
  .pg-bb-tip { display: none; }
  .pg-bb-stage { padding: 6px; }
}

@media (min-width: 900px) {
  .pg-bb-tip { display: none; }
}

/* =====================================================================
   HOJA DE DETALLE EN MÓVIL · pestañas Specs / Redes
   En escritorio los dos paneles conviven y las pestañas no existen.
   ===================================================================== */

.pg-sheet-tabs { display: none; }

@media (max-width: 900px) {
  .pg-sheet-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 12px;
    padding: 4px;
    border: 1px solid var(--pg-line);
    border-radius: 12px;
    background: var(--pg-bg);
  }

  .pg-sheet-tab {
    min-height: 44px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--pg-text-dim);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .pg-sheet-tab.active {
    background: var(--pg-accent-dim);
    color: var(--pg-accent-soft);
  }

  .pg-sheet-tab-n {
    display: inline-block;
    min-width: 18px;
    margin-left: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pg-accent) 26%, transparent);
    font-size: 0.62rem;
  }

  /* una sola superficie de scroll: la del panel activo */
  .pg-modal-body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
  }

  .pg-modal-body > .pg-modal-props,
  .pg-modal-body > .pg-modal-preview {
    grid-area: 1 / 1;
    overflow-y: auto;
    padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
  }

  .pg-modal-body[data-tab="specs"] > .pg-modal-preview,
  .pg-modal-body[data-tab="redes"] > .pg-modal-props { display: none; }

  .pg-modal-props { border-right: 0; border-bottom: 0; }
}

/* la barra del detalle en móvil: título, navegación y pestañas en tres renglones */
@media (max-width: 900px) {
  .pg-modal-topbar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px;
  }

  .pg-modal-topbar .pg-badges {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
  }

  .pg-modal-topbar #pg-modal-title {
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pg-modal-topbar .pg-modal-close {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.2rem;
  }

  .pg-modal-topbar .pg-modal-nav {
    min-height: 44px;
    white-space: nowrap;
  }

  .pg-modal-topbar .pg-modal-counter {
    align-self: center;
    color: var(--pg-text-dim);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .pg-sheet-tabs { grid-column: 1 / -1; grid-row: 3; margin-top: 2px; }

  /* objetivos táctiles: nada por debajo de 44 px de alto */
  .pg-mode-toggle .pg-mode-btn { min-height: 44px; }
  .pg-chip { min-height: 44px; padding: 12px 15px; font-size: 0.72rem; }
  .pg-copy-btn,
  .pg-kb-btn { min-height: 44px; padding: 11px 15px; }
  .pg-week-card { min-height: 60px; }
  .pg-kb-card { min-height: 44px; }
  .pg-modal-tab { min-height: 44px; padding: 10px 14px; }
}

/* El titular del mock vertical se centraba en TODO el alto, así que se pintaba
   encima del handle, del botón Seguir y del caption. Reserva el espacio del
   cromo inferior y del rail lateral. */
.mock-vertical {
  padding: 42px 62px 132px 14px;
}

.mock-vertical .mock-vertical-center {
  padding: 0;
  max-height: 100%;
  overflow: hidden;
}

/* El rail se anclaba a 108 px del fondo, medida de escritorio: en un mock más
   corto se salía por arriba. Se ancla al bloque inferior y se encoge con él. */
.mock-vrail {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  gap: 14px;
}

@media (max-width: 900px) {
  .mock-vertical { padding: 38px 56px 124px 12px; }
  .mock-vrail { gap: 12px; }
  .mock-vrail-item svg { width: 22px; height: 22px; }
}

/* el caption crecía con el texto y volvía a morder el titular */
.mock-vertical .mock-vertical-caption {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

@media (max-width: 900px) {
  .mock-vertical { padding-bottom: 150px; }
  .mock-vertical .mock-vertical-caption { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* =====================================================================
   CALENDARIO · mes en escritorio, semana en móvil
   ===================================================================== */

.pg-cal-week { display: none; }

.pg-week-bar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
  padding: 10px 0 14px;
  background: linear-gradient(var(--pg-bg) 78%, transparent);
}

.pg-week-nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--pg-line);
  border-radius: 12px;
  background: var(--pg-surface);
  color: var(--pg-text);
  cursor: pointer;
}

.pg-week-nav svg { width: 19px; height: 19px; }
.pg-week-nav[disabled] { opacity: 0.3; cursor: default; }

.pg-week-label { text-align: center; }

.pg-week-label strong {
  display: block;
  font-family: var(--pg-display);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pg-week-label span {
  display: block;
  margin-top: 2px;
  color: var(--pg-text-dim);
  font-size: 0.7rem;
}

.pg-week-list { display: grid; gap: 10px; }

.pg-week-day {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--pg-line);
}

.pg-week-day.vacio { opacity: 0.42; }

.pg-week-date { text-align: center; }

.pg-week-dow {
  display: block;
  color: var(--pg-text-dim);
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.09em;
}

.pg-week-num {
  display: block;
  font-family: var(--pg-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.1;
}

.pg-week-day.hoy .pg-week-num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--pg-accent);
  color: #0D0D0F;
}

.pg-week-items { display: grid; gap: 8px; min-width: 0; }

.pg-week-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--vd-ink) 30%, transparent);
  border-left: 4px solid var(--vd-ink);
  border-radius: 12px;
  background: var(--vd-surf);
  color: var(--vd-on-surf);
  text-align: left;
  cursor: pointer;
}

.pg-week-art {
  width: 42px;
  height: 52px;
  border-radius: 7px;
  object-fit: cover;
}

.pg-week-body { display: grid; gap: 3px; min-width: 0; }

.pg-week-meta {
  color: var(--vd-on-surf-dim);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pg-week-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

.pg-week-nada {
  margin: 0;
  padding: 12px 0;
  color: var(--pg-text-dim);
  font-size: 0.72rem;
}

@media (max-width: 900px) {
  .pg-cal-month { display: none; }
  .pg-cal-week { display: block; }
}

/* =====================================================================
   MÓVIL · kanban en carril horizontal y tabla con indicador de scroll
   ===================================================================== */

@media (max-width: 900px) {
  /* El tablero se apilaba: la columna 1 medía 2 587 px y la 3 arrancaba a
     4 024 px del inicio. En carril con anclaje siguen siendo comparables. */
  .pg-kanban-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .pg-kanban-grid::-webkit-scrollbar { display: none; }

  .pg-kb-col {
    scroll-snap-align: start;
    min-width: 0;
    max-height: 68vh;
    overflow-y: auto;
  }

  .pg-kb-col h3 {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 0 8px;
    padding: 10px 0;
    background: linear-gradient(var(--pg-surface) 78%, transparent);
  }

  .pg-kanban-toolbar,
  .pg-kanban-add {
    display: grid;
    gap: 8px;
  }

  .pg-kanban-add .pg-kb-btn,
  .pg-kanban-add .pg-input,
  .pg-kanban-add .pg-select { min-height: 44px; }

  /* La tabla escondía 149 px sin avisar. Se anuncia el desplazamiento. */
  .pg-table-wrap {
    position: relative;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .pg-table-view::after {
    content: "Desliza la tabla para ver plataformas y fecha";
    display: block;
    margin-top: 8px;
    color: var(--pg-text-dim);
    font-size: 0.66rem;
    text-align: center;
  }

  .pg-table-wrap::after {
    content: "";
    position: sticky;
    top: 0;
    right: 0;
    float: right;
    width: 26px;
    height: 100%;
    background: linear-gradient(270deg, var(--pg-bg), transparent);
    pointer-events: none;
  }

  /* el mapa de formatos también se recortaba en silencio */
  .pg-cross-table-wrap { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 900px) {
  /* los filtros ya no caben en una línea: carril horizontal con anclaje */
  .pg-controls { flex-direction: column; align-items: stretch; gap: 10px; }

  .pg-filters {
    display: grid;
    gap: 8px;
    justify-content: stretch;
  }

  .pg-filter-group {
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pg-filter-group::-webkit-scrollbar { display: none; }
  .pg-filter-group .pg-chip { flex: none; }
  .pg-filter-label { flex: none; align-self: center; }

  .pg-mode-toggle { width: 100%; }
  .pg-mode-toggle .pg-mode-btn { flex: 1; padding: 12px 8px; }
}

/* =====================================================================
   CARRIL DE PLATAFORMAS
   Escritorio: sólo el mock activo, las pestañas mandan.
   Móvil: carril con anclaje, el dedo hace de pestaña.
   ===================================================================== */

.pg-plat-rail { width: 100%; }
.pg-plat-slide { display: none; }
.pg-plat-slide.active { display: block; }
.pg-plat-dots { display: none; }

@media (max-width: 900px) {
  .pg-plat-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .pg-plat-rail::-webkit-scrollbar { display: none; }

  .pg-plat-slide {
    display: block;
    min-width: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .pg-plat-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
  }

  /* Tres barras iguales no dicen a que red pertenecen: hay que deslizar para
     averiguarlo. Cada punto pasa a ser el glifo de su plataforma, con caja
     tactil de 40 px y la activa marcada por color y fondo, no por tamaño. */
  .pg-plat-dots {
    gap: 4px;
  }

  .pg-plat-dot {
    display: grid;
    place-items: center;
    width: 40px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: color-mix(in srgb, var(--pg-text-dim) 78%, transparent);
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
  }

  .pg-plat-dot.active {
    border-color: color-mix(in srgb, var(--pg-accent) 46%, transparent);
    background: color-mix(in srgb, var(--pg-accent) 15%, transparent);
    color: var(--pg-accent);
    transform: none;
  }

  .pg-plat-dot:active {
    transform: scale(0.94);
  }

  /* las pestañas siguen ahí como atajo, en carril */
  .pg-modal-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
    scrollbar-width: none;
  }

  .pg-modal-tabs::-webkit-scrollbar { display: none; }
  .pg-modal-tab { flex: none; }
}

/* =====================================================================
   MÓVIL · el encabezado se comía la primera pantalla completa
   ===================================================================== */

@media (max-width: 900px) {
  .pg-hero { margin-bottom: 14px; }

  .pg-hero h1 {
    font-size: clamp(26px, 8vw, 38px);
    line-height: 0.95;
  }

  .pg-hero > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 0.8rem;
  }

  /* la estrategia pasa a ser desplegable: 168 px que estorbaban */
  .pg-strategy {
    padding: 12px 14px;
    text-align: left;
  }

  .pg-strategy strong {
    display: block;
    font-size: 0.8rem;
  }

  .pg-strategy span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 0.74rem;
  }

  .pg-strategy.abierta span { -webkit-line-clamp: unset; line-clamp: unset; }

  .pg-strategy-toggle {
    display: block;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pg-accent);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
  }

  /* stats en tira compacta: 4 columnas de 2 renglones en vez de 4 tarjetas altas */
  .pg-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .pg-stat {
    padding: 10px 4px;
    text-align: center;
  }

  .pg-stat strong { font-size: 1.15rem; }
  .pg-stat span { font-size: 0.5rem; letter-spacing: 0.04em; }

  .pg-month-selector { gap: 6px; }
  .pg-month-btn { padding: 9px 12px; font-size: 0.7rem; }
  .pg-month-btn small { font-size: 0.5rem; }

  /* la leyenda de pilares repite lo que ya dicen los chips de filtro */
  #pg-pillars { display: none; }
}

/* El toggle sólo existe en móvil, donde la estrategia arranca plegada.
   Esta regla iba SIN media query y, por venir después del bloque de 900px,
   ganaba a igual especificidad: el botón nunca aparecía en el teléfono. */
@media (min-width: 901px) {
  .pg-strategy-toggle { display: none; }
}

/* el encabezado seguía empujando la primera pieza 139 px fuera de pantalla */
@media (max-width: 900px) {
  body { padding-top: 14px; }

  .pg-eyebrow { font-size: 0.56rem; padding: 5px 11px; }

  .pg-hero { margin-bottom: 10px; }
  .pg-hero h1 { margin: 8px 0 6px; }
  .pg-hero > p { -webkit-line-clamp: 1; line-clamp: 1; margin: 0 0 10px; }

  /* la estrategia arranca plegada: sólo el título y el enlace */
  .pg-strategy span { -webkit-line-clamp: 0; line-clamp: 0; max-height: 0; margin: 0; }
  .pg-strategy.abierta span { -webkit-line-clamp: unset; line-clamp: unset; max-height: none; margin-top: 6px; }
  .pg-strategy-toggle { margin-top: 4px; }

  .pg-stats { margin: 10px 0; }
  .pg-stat { padding: 8px 4px; }

  .pg-controls { margin-bottom: 12px; padding: 10px 0; }
  .pg-month-selector { margin: 10px 0; }
}

@media (max-width: 900px) {
  .pg-stat { padding: 7px 4px; }
  .pg-stat strong { font-size: 1.05rem; }
  .pg-hero h1 { margin: 6px 0 4px; }
  .pg-month-selector { margin: 8px 0; }
  .pg-controls { padding: 8px 0; margin-bottom: 10px; }
}

@media (max-width: 900px) {
  .pg-stats { gap: 5px; margin: 8px 0; }
  .pg-strategy { padding: 10px 13px; }
}

/* =====================================================================
   SUBIDA DE ARTE POR PIEZA
   ===================================================================== */

.pg-arte { margin-top: 22px; }

.pg-arte-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.pg-arte-head .pg-detail-label { margin: 0; }

.pg-arte-caja {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  margin: 0;
  padding: 7px 13px;
  border: 1px solid color-mix(in srgb, var(--pg-accent) 46%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--pg-accent-dim) 22%, var(--pg-surface));
  color: var(--pg-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.pg-arte-caja:hover,
.pg-arte-caja:focus-visible {
  border-color: var(--pg-accent);
  background: color-mix(in srgb, var(--pg-accent-dim) 34%, var(--pg-surface));
}

.pg-arte-caja svg { width: 15px; height: 15px; color: var(--pg-accent); }

.pg-arte-caja b {
  font-size: 0.73rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Quitar comparte forma con Reemplazar pero no su peso: contorno sin relleno,
   y sólo se tiñe de rojo cuando ya está preguntando si va en serio. */
.pg-arte-quitar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin: 0;
  padding: 7px 11px;
  border: 1px solid var(--pg-line);
  border-radius: 9px;
  background: transparent;
  color: var(--pg-text-dim);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.pg-arte-quitar:hover,
.pg-arte-quitar:focus-visible {
  border-color: color-mix(in srgb, var(--pg-danger) 52%, transparent);
  color: var(--pg-text);
}

.pg-arte-quitar svg { width: 13px; height: 13px; }

.pg-arte-quitar b {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.pg-arte-quitar[data-paso="1"] {
  border-color: var(--pg-danger);
  background: color-mix(in srgb, var(--pg-danger) 16%, transparent);
  color: var(--pg-danger);
}

.pg-arte-quitar[data-paso="yendo"] { opacity: 0.5; pointer-events: none; }

.pg-arte-head { flex-wrap: wrap; }
.pg-arte-head .pg-detail-label { flex: 1 1 auto; }

.pg-arte-specs {
  display: block;
  margin-top: 7px;
  color: var(--pg-text-dim);
  font-size: 0.64rem;
  line-height: 1.5;
}

/* la zona de soltar es el bloque, no el boton */
.pg-arte.encima {
  border-radius: 12px;
  outline: 1px dashed var(--pg-accent);
  outline-offset: 6px;
}

.pg-arte.encima .pg-arte-caja { border-color: var(--pg-accent); }

.pg-arte-msg {
  margin: 10px 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-line;
}

.pg-arte[data-estado="trabajando"] .pg-arte-msg { color: var(--pg-accent-soft); }
.pg-arte[data-estado="listo"] .pg-arte-msg { color: var(--pg-ok); }
.pg-arte[data-estado="error"] .pg-arte-msg { color: var(--pg-danger); }

.pg-arte[data-estado="trabajando"] .pg-arte-caja {
  pointer-events: none;
  opacity: 0.55;
}

.pg-arte-nota {
  margin: 8px 0 0;
  color: var(--pg-text-dim);
  font-size: 0.66rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  /* 116 px venia de cuando la caja era la zona de soltar entera. Ahora es un
     boton: basta el minimo tactil. */
  .pg-arte-caja { min-height: 44px; padding: 10px 15px; }
  .pg-arte-caja b { font-size: 0.78rem; }
}

/* =====================================================================
   VISTA DEL ARCHIVO COMPLETO
   La proporción procede del archivo, no de un supuesto recorte de la red.
   El carrusel usa el lienzo de su primera lámina y contiene las demás.
   Esta referencia no sustituye la comprobación del formato final en Meta.
   ===================================================================== */

.mock-ig-image.has-art,
.mock-carousel-slides.con-arte,
.mock-fb-visual.has-art:not(.vertical) {
  aspect-ratio: var(--mock-art-ratio, 4 / 5);
  min-height: 0;
  padding: 0;
}

[data-arte-marco] .mock-art {
  object-fit: contain;
}

.mock-art-formato {
  margin: 0;
  padding: 7px 12px;
  color: var(--pg-ig-dim);
  font-size: 0.62rem;
  line-height: 1.45;
  text-align: left;
}

.mock-carousel-slides.con-arte .mock-slide {
  position: absolute;
  inset: 0;
}

.mock-art {
  object-position: center;
}

/* aviso de recorte sobre la propia imagen: se ve qué queda fuera */
.mock-art-recorte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, rgba(13, 13, 15, 0.9));
  color: var(--pg-accent-soft);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}

/* =====================================================================
   VISOR DE REDES EN MÓVIL
   La pestaña «Redes» deja de ser un panel con cromo y pasa a ser un visor:
   el mock ocupa la pantalla y las dos barras flotan encima.
   Nada de esto existe por encima de 900 px.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. EL CONFLICTO DE SCROLL · un eje por superficie
   Esto NO depende del visor: es la corrección del carril, que hoy se come
   los dos ejes. `overflow-x: auto` sin pareja hace que el eje Y compute a
   `auto` por especificación; al volverse contenedor de scroll, su
   `min-height: auto` resuelve a 0 y el flex padre lo aplasta a ~297 px.
   El desbordamiento vertical del mock cae DENTRO del carril y el panel
   —que es quien debía scrollear— se queda inerte.
   --------------------------------------------------------------------- */

@media (max-width: 900px) {
  .pg-plat-rail {
    overflow-x: auto;
    overflow-y: hidden;         /* explícito: mata la promoción a `auto` */
    flex: none;                 /* deja de encogerse: alto = alto del mock */
    /* El gesto vertical que empieza sobre el mock no encuentra recorrido
       aquí y tiene que poder ENCADENAR al panel. Por eso `contain` va sólo
       en X: en Y debe salir. */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    /* touch-action se queda en `auto` a propósito. `pan-x` aquí restringe
       la cadena y le quitaría al panel el gesto vertical que nace sobre
       el mock: el navegador intersecta touch-action hacia arriba. Con un
       solo eje por scroller, el bloqueo de eje nativo ya desambigua. */
  }

  .pg-modal-preview {
    overflow-x: hidden;         /* explícito por el mismo motivo */
    overflow-y: auto;
    overscroll-behavior: contain;   /* no rebota la página ni el viewport */
  }

  /* 11–13 px de scroll vertical parásito sobre una barra de 21 px de alto */
  .pg-modal-tabs {
    overflow-y: hidden;
    flex: none;
  }
}

/* ---------------------------------------------------------------------
   2. EL VISOR
   Todo cuelga de #pg-modal[data-visor="redes"], que sólo pone
   parrilla-viewer.js. Sin ese script, la hoja se comporta como hoy.
   --------------------------------------------------------------------- */

@media (max-width: 900px) and (min-height: 520px) {
  #pg-modal[data-visor="redes"] .pg-modal {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    grid-template-rows: minmax(0, 1fr);
    border: 0;
    border-radius: 0;
    background: #0D0D0F;
    transform: translateY(10px);
  }

  #pg-modal[data-visor="redes"].open .pg-modal {
    transform: translateY(0);
  }

  /* el hueco real entre las dos barras: lo que puede ocupar la pieza */
  #pg-modal[data-visor] .pg-modal-body {
    --vw-top: 56px;
    --vw-dock: calc(128px + env(safe-area-inset-bottom, 0px));  /* lo afina el JS */
    --vw-hueco: calc(100dvh - var(--vw-top) - var(--vw-dock));
  }

  /* ---- 2.1 barra superior: una franja de 44 px que no ocupa layout ---- */

  #pg-modal[data-visor="redes"] .pg-modal-topbar {
    position: absolute;
    z-index: 4;
    inset: 0 0 auto;
    display: grid;
    /* Una sola salida y a la derecha: antes la X cerraba desde la izquierda y
       «Specs» devolvía a la ficha desde la derecha — dos botones de salir, uno
       en cada punta. Se queda la X, en el lado donde estaba Specs. */
    grid-template-columns: minmax(0, 1fr) auto 44px;
    grid-template-rows: 44px;
    align-items: center;
    gap: 8px;
    padding: max(6px, env(safe-area-inset-top, 0px)) 8px 24px;
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(13, 13, 15, 0.94) 40%, rgba(13, 13, 15, 0));
    /* el degradado no debe robarle el gesto al mock que hay debajo */
    pointer-events: none;
  }

  #pg-modal[data-visor="redes"] .pg-modal-topbar > * { pointer-events: auto; }

  #pg-modal[data-visor="redes"] .pg-modal-topbar .pg-modal-close {
    grid-area: 1 / 3;
    width: 44px;
    height: 44px;
    border: 1px solid var(--pg-line);
    border-radius: 13px;
    background: rgba(13, 13, 15, 0.6);
    backdrop-filter: blur(12px);
    color: var(--pg-text);
    font-size: 1.15rem;
  }

  #pg-modal[data-visor="redes"] .pg-modal-topbar #pg-modal-title {
    grid-area: 1 / 1;
    padding-left: 6px;
    overflow: hidden;
    color: var(--pg-text-dim);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* el contenedor desaparece y sus hijos se colocan solos en la rejilla */
  #pg-modal[data-visor="redes"] .pg-modal-topbar .pg-badges { display: contents; }
  /* La navegacion baja a la barra en las dos pestañas: arriba dejaria dos
     juegos del mismo control, uno lejos del pulgar. */
  #pg-modal[data-visor] .pg-modal-topbar .pg-modal-nav { display: none; }

  #pg-modal[data-visor="redes"] .pg-modal-topbar .pg-modal-counter {
    grid-area: 1 / 2;
    padding: 0 2px;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
  }

  /* Las dos pestañas se retiran: la X hace de salida única. Para volver a la
     ficha se cierra y se vuelve a abrir la pieza, que arranca en Specs. */
  #pg-modal[data-visor="redes"] .pg-sheet-tabs { display: none; }

  /* ---- 2.2 el panel: única superficie de scroll vertical ---- */

  #pg-modal[data-visor="redes"] .pg-modal-preview {
    gap: 0;
    justify-content: flex-start;
    padding: var(--vw-top) 8px var(--vw-dock);
    background: #0D0D0F;
    scroll-padding: var(--vw-top) 0 var(--vw-dock);
  }

  /* el badge de origen ya se ve en la parrilla; aquí sólo sería cromo */
  #pg-modal[data-visor="redes"] .pg-modal-preview > .pg-source { display: none; }

  /* las pestañas de texto las sustituyen los puntos de la barra inferior,
     que sí tienen 44 px de objetivo táctil */
  #pg-modal[data-visor="redes"] .pg-modal-preview > .pg-modal-tabs { display: none; }

  /* El visor retira los puntos del motor al montar su barra, pero el motor los
     vuelve a pintar en cada `renderDetailPreview` — al cambiar de red salían dos
     juegos, uno encima del otro. Con puntos de 7 px se confundían con uno solo;
     con el glifo de cada red la duplicación es evidente. Manda la barra. */
  #pg-modal[data-visor="redes"] .pg-modal-preview > .pg-plat-dots { display: none; }

  /* ---- 2.3 la pieza manda ---- */

  #pg-modal[data-visor="redes"] .pg-plat-rail { gap: 10px; }

  /* el mock vertical se pegaba a la izquierda y dejaba 98 px muertos */
  #pg-modal[data-visor="redes"] .pg-plat-slide {
    display: grid;
    justify-items: center;
    align-content: start;
  }

  /* El tope de 410 px del motor dejaba 26 px muertos a cada lado en el móvil.
     Se sube a 520 —el post ocupa el ancho del visor en el teléfono— pero no se
     quita: en tableta un post de 750 px de ancho mide 1130 de alto y no cabe. */
  #pg-modal[data-visor="redes"] .mock-ig,
  #pg-modal[data-visor="redes"] .mock-fb,
  #pg-modal[data-visor="redes"] .mock-th {
    width: 100%;
    max-width: 520px;
    border-radius: 13px;
  }

  /* formatos verticales: entran ENTEROS en el hueco, sin scroll.
     Es una pieza sola; verla completa vale más que verla ancha. */
  #pg-modal[data-visor="redes"] .mock-vertical {
    width: auto;
    max-width: 100%;
    height: min(var(--vw-hueco), calc((100vw - 16px) * 16 / 9));
    border-radius: 18px;
  }
}

/* ---------------------------------------------------------------------
   3. BARRA INFERIOR FLOTANTE
   [← anterior] [SUBIR ARTE] [siguiente →], con los puntos encima.
   --------------------------------------------------------------------- */

.pg-viewer-dock { display: none; }

@media (max-width: 900px) and (min-height: 520px) {
  #pg-modal[data-visor] .pg-viewer-dock {
    position: absolute;
    z-index: 5;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: 8px;
    display: grid;
    padding: 6px;
    border: 1px solid var(--pg-line);
    border-radius: 22px;
    background: color-mix(in srgb, #0D0D0F 74%, transparent);
    backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.58);
  }

  .pg-viewer-dock .pg-plat-dots {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    gap: 0;
    margin: 0;
  }

  .pg-viewer-dock .pg-plat-dot {
    display: grid;
    place-items: center;
    width: 42px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: color-mix(in srgb, var(--pg-text-dim) 80%, transparent);
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
  }

  /* La barra que se estiraba sobra en cuanto hay glifo: se marca la activa por
     color y fondo. El ::before sigue para la plataforma sin icono. */
  .pg-viewer-dock .pg-plat-dot:not(.con-icono)::before {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pg-text-dim) 62%, transparent);
    content: "";
    transition: width 180ms ease, background 180ms ease;
  }

  .pg-viewer-dock .pg-plat-dot.active {
    border-color: color-mix(in srgb, var(--pg-accent) 48%, transparent);
    background: color-mix(in srgb, var(--pg-accent) 16%, transparent);
    color: var(--pg-accent);
    transform: none;
  }

  .pg-viewer-dock .pg-plat-dot.active:not(.con-icono)::before {
    width: 22px;
    background: var(--pg-accent);
  }

  /* La fila de abajo es navegación, no la pieza: cuanto menos ocupe, más alto
     queda el post. Las flechas bajan a 38 y el área táctil se recupera con el
     padding de la barra, que ya suma por encima de los 44 px. */
  .pg-viewer-nav {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 6px;
  }

  .pg-viewer-step {
    display: grid;
    place-items: center;
    height: 38px;
    border: 1px solid var(--pg-line);
    border-radius: 11px;
    background: rgba(245, 242, 234, 0.05);
    color: var(--pg-text);
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
  }

  .pg-viewer-step:active {
    border-color: var(--pg-accent);
    background: var(--pg-accent-dim);
  }

  .pg-viewer-step svg { width: 17px; height: 17px; }

  .pg-viewer-cta {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    place-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--pg-accent);
    font-family: var(--pg-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
  }

  .pg-viewer-cta svg { width: 16px; height: 16px; stroke-width: 2.2; }

  /* Sin fondo hace falta otra señal de que respondió al toque. */
  .pg-viewer-cta:active {
    background: color-mix(in srgb, var(--pg-accent) 16%, transparent);
  }

  .pg-viewer-cta[disabled] {
    background: none;
    color: var(--pg-text-dim);
    cursor: default;
  }

  .pg-viewer-step:focus-visible,
  .pg-viewer-cta:focus-visible,
  .pg-viewer-dock .pg-plat-dot:focus-visible {
    outline: 2px solid var(--pg-accent-soft);
    outline-offset: 2px;
  }
}

/* ---------------------------------------------------------------------
   4. CAJÓN DE SUBIDA
   --------------------------------------------------------------------- */

.pg-arte-cajon { display: none; }

@media (max-width: 900px) and (min-height: 520px) {
  .pg-arte-cajon {
    position: absolute;
    z-index: 20;
    display: block;
    inset: 0;
  }

  .pg-arte-cajon[hidden] { display: none; }

  .pg-arte-scrim {
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 7, 0.68);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 220ms ease;
    /* el dedo sobre el velo no debe mover el mock que hay detrás */
    touch-action: none;
  }

  .pg-arte-cajon.abierto .pg-arte-scrim { opacity: 1; }

  .pg-arte-hoja {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 88dvh;
    border: 1px solid var(--pg-line);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background: #131315;
    box-shadow: 0 -22px 60px rgba(0, 0, 0, 0.6);
    transform: translate3d(0, 100%, 0);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .pg-arte-cajon.abierto .pg-arte-hoja { transform: translate3d(0, 0, 0); }

  .pg-arte-cabecera {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    padding: 16px 12px 12px 18px;
    border-bottom: 1px solid var(--pg-line);
    /* la cabecera es el agarre: el navegador no debe interpretar el arrastre */
    touch-action: none;
    cursor: grab;
  }

  .pg-arte-tirador {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pg-text-dim) 55%, transparent);
    transform: translateX(-50%);
  }

  .pg-arte-cabecera h2 {
    margin: 0;
    color: var(--pg-text);
    font-family: var(--pg-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .pg-arte-sub {
    margin: 3px 0 0;
    overflow: hidden;
    color: var(--pg-text-dim);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pg-arte-cerrar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--pg-line);
    border-radius: 13px;
    background: transparent;
    color: var(--pg-text-dim);
    cursor: pointer;
  }

  .pg-arte-cerrar svg { width: 18px; height: 18px; }

  .pg-arte-cuerpo {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }

  /* ---- el contrato, tal cual lo declara CONTRATOS ---- */

  .pg-arte-contrato {
    margin: 0 0 16px;
    padding: 4px 14px;
    border: 1px solid var(--pg-line);
    border-radius: 14px;
    background: rgba(245, 242, 234, 0.03);
  }

  .pg-arte-fila {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--pg-line) 60%, transparent);
  }

  .pg-arte-fila:last-of-type { border-bottom: 0; }

  .pg-arte-fila dt {
    color: var(--pg-accent-soft);
    font-size: 0.6rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .pg-arte-fila dd {
    margin: 0;
    color: var(--pg-text);
    font-size: 0.76rem;
    line-height: 1.45;
  }

  .pg-arte-nota-contrato,
  .pg-arte-vacio {
    margin: 0;
    padding: 10px 0 2px;
    color: var(--pg-text-dim);
    font-size: 0.68rem;
    line-height: 1.5;
  }

  /* ---- el uploader vive aquí; su `small` repetía el contrato ---- */

  [data-arte-host] .pg-arte { margin-top: 0; }
  [data-arte-host] .pg-arte > .pg-detail-label { display: none; }
  [data-arte-host] .pg-arte-caja small { display: none; }
  [data-arte-host] .pg-arte-caja { min-height: 148px; margin-top: 0; }
  [data-arte-host] .pg-arte-caja svg { width: 30px; height: 30px; }
  [data-arte-host] .pg-arte-caja b { font-size: 0.92rem; }

  [data-arte-host] .pg-arte[data-estado="error"] .pg-arte-caja {
    border-color: var(--pg-danger);
    background: color-mix(in srgb, var(--pg-danger) 10%, transparent);
  }

  [data-arte-host] .pg-arte[data-estado="listo"] .pg-arte-caja {
    border-style: solid;
    border-color: var(--pg-ok);
  }

  [data-arte-host] .pg-arte[data-estado="trabajando"] .pg-arte-barra { display: block; }
}

/* barra de progreso: sólo se ve dentro del cajón, el escritorio no la usa */
.pg-arte-barra {
  position: relative;
  display: none;
  overflow: hidden;
  height: 6px;
  margin-top: 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pg-accent) 14%, transparent);
}

/* indeterminado: mientras se valida todavía no hay porcentaje */
.pg-arte-barra::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pg-accent) 55%, transparent), transparent);
  content: "";
  transform: translateX(-100%);
  animation: pg-arte-desliza 1.15s linear infinite;
}

/* determinado: el ancho lo pone --pg-arte-pct desde parrilla-arte.js */
.pg-arte-barra i {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: calc(var(--pg-arte-pct, 0) * 1%);
  border-radius: 999px;
  background: var(--pg-accent);
  transition: width 220ms ease;
}

@keyframes pg-arte-desliza {
  to { transform: translateX(100%); }
}

/* ---------------------------------------------------------------------
   5. Degradaciones
   --------------------------------------------------------------------- */

@media (prefers-reduced-transparency: reduce) {
  #pg-modal[data-visor] .pg-viewer-dock,
  #pg-modal[data-visor="redes"] .pg-modal-topbar .pg-modal-close {
    background: #0D0D0F;
    backdrop-filter: none;
  }

  #pg-modal[data-visor="redes"] .pg-modal-topbar {
    background: #0D0D0F;
    padding-bottom: 8px;
  }

  .pg-arte-scrim { backdrop-filter: none; background: rgba(6, 6, 7, 0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .pg-arte-hoja,
  .pg-arte-scrim { transition: none; }
  .pg-arte-barra::after { animation: none; }
}

/* =====================================================================
   Correcciones sobre el visor de Redes
   ===================================================================== */

@media (max-width: 900px) and (min-height: 520px) {
  /* Al 74% el caption del mock se leía DETRÁS del dock. El desenfoque no da
     contraste contra texto; hace falta opacidad. */
  #pg-modal[data-visor] .pg-viewer-dock {
    background: color-mix(in srgb, #0D0D0F 94%, transparent);
  }

  /* El mock terminaba debajo del dock: sus últimas filas —acciones y caption—
     quedaban tapadas. Se reserva el alto del dock al final del scroll. */
  #pg-modal[data-visor="redes"] .pg-modal-preview {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  /* En Specs el panel que scrollea es la columna de propiedades, no la vista
     previa. Se reserva el alto REAL de la barra —el que mide el JS— porque en
     esta pestaña no lleva fila de redes y es mas baja que en la otra. */
  #pg-modal[data-visor="specs"] .pg-modal-props {
    padding-bottom: calc(var(--vw-dock, 104px) + 8px);
  }

  /* Con la barra abajo, el bloque de arte de la ficha es el mismo trabajo por un
     segundo camino: dos botones de subir en la misma pantalla que abren hojas
     distintas. Y como el bloque se muda al cajon al abrirlo, la ficha daba un
     salto. Manda la barra; el bloque reaparece dentro del cajon. */
  #pg-modal[data-visor="specs"] .pg-modal-props .pg-arte { display: none; }

  /* Con las flechas abajo, `.pg-badges` se quedaba ocupando una franja entera
     para un contador de trece pixeles. Sube a la fila del titulo, en la misma
     reparticion que usa Redes: titulo · contador · salida. */
  #pg-modal[data-visor="specs"] .pg-modal-topbar {
    grid-template-columns: minmax(0, 1fr) auto 44px;
  }

  #pg-modal[data-visor="specs"] .pg-modal-topbar .pg-badges { display: contents; }
  #pg-modal[data-visor="specs"] .pg-modal-topbar #pg-modal-title { grid-area: 1 / 1; }
  #pg-modal[data-visor="specs"] .pg-modal-topbar .pg-modal-close { grid-area: 1 / 3; }
  #pg-modal[data-visor="specs"] .pg-modal-topbar .pg-sheet-tabs {
    grid-column: 1 / -1;
    /* Tambien la fila: la base las clava en la 3, y sin esto la 2 se queda
       sin ningun item pero sigue cobrando sus dos row-gap. */
    grid-row: 2;
  }

  #pg-modal[data-visor="specs"] .pg-modal-topbar .pg-modal-counter {
    grid-area: 1 / 2;
    padding: 0 2px;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
  }

  /* El navegador arbitraba entre ejes en cada gesto diagonal. Declarar el eje
     quita la ambigüedad antes de que empiece el arrastre. */
  #pg-modal[data-visor="redes"] .pg-plat-rail {
    touch-action: pan-x;
    overscroll-behavior: contain;
  }

  #pg-modal[data-visor="redes"] .pg-modal-preview {
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
}

/* Táctiles que se quedaron por debajo del mínimo de 44 px */
@media (max-width: 900px) {
  .pg-id-nav-btn { min-height: 44px; padding: 0 16px; }
  .pg-bb-btn { min-width: 44px; height: 44px; }
  .pg-bb-btn.close { font-size: 1.3rem; }
}

/* Al subir los botones a 44 px la barra del visor pasó de 393 a 462 px y el
   cerrar quedó fuera de pantalla. En móvil el título cede y «Ajustar» se
   vuelve icono: los cuatro controles caben sin encogerse. */
@media (max-width: 560px) {
  .pg-bb-bar { gap: 6px; padding: 8px 10px; }
  .pg-bb-title { display: none; }
  .pg-bb-tools { width: 100%; justify-content: space-between; }
  .pg-bb-btn { padding: 0 10px; }
  .pg-bb-pct { min-width: 52px; }
}

/* La estrategia salió del hero y vive debajo del selector de mes */
#pg-strategy[hidden] { display: none !important; }

.pg-strategy-wrap {
  display: block;
  margin: 0 0 18px;
}

.pg-strategy-wrap .pg-strategy {
  margin: 0;
}


/* ---- tabla: las plataformas caben en su columna sin apilarse ---- */
.pg-table td .pg-platforms {
  flex-wrap: nowrap;
  gap: 4px;
}

.pg-table td .pg-platforms .pg-platform {
  padding: 2px 6px;
  font-size: 0.55rem;
}


/* =====================================================================
   Escritorio: la vista previa deja de estar limitada a 270 px
   El tope de ancho del mock vertical se puso pensando en el panel movil.
   En escritorio el mock es la pieza principal de su columna y hay 900 px
   de alto disponibles: se dimensiona por ALTURA y el 9:16 saca el ancho.
   ===================================================================== */
@media (min-width: 901px) {
  .pg-modal-body {
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.95fr);
  }

  .pg-modal-preview {
    justify-content: flex-start;
    overflow: hidden;
  }

  /* Un carrusel con arte mide 4:5 y debajo lleva puntos, cuenta, guion,
     acciones y caption: no cabe en el panel y se recortaba en seco — ni los
     puntos ni el número de lámina llegaban a verse. Sólo en ese caso el panel
     scrollea y el mock conserva su proporción, que es justo lo que se viene a
     mirar. Los dos ejes se declaran: `overflow-y:auto` a solas resuelve el otro
     a `auto` y el panel le roba el gesto horizontal al carril. */
  .pg-modal-preview:has(.mock-carousel-slides) {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .pg-plat-rail:has(.mock-carousel-slides) {
    flex: 0 0 auto;
  }

  .pg-plat-slide.active:has(.mock-carousel-slides) > * {
    max-height: none;
  }

  .pg-plat-rail {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
  }

  .pg-plat-slide.active {
    display: flex;
    min-height: 0;
    justify-content: center;
  }

  .pg-plat-slide.active > * { max-height: 100%; }

  .mock-vertical {
    width: auto;
    height: 100%;
    max-height: 100%;
  }

  .mock-ig,
  .mock-fb {
    width: min(100%, 460px);
    max-height: 100%;
    overflow-y: auto;
  }
}


/* =====================================================================
   El boton de subir vive en la columna de la vista previa, arriba de las
   pestanas de red y pegado a la derecha. En movil este hueco no existe:
   ahi el uploader es el cajon de parrilla-viewer.js.
   ===================================================================== */
.pg-arte-slot { display: none; }

@media (min-width: 901px) {
  .pg-arte-slot {
    display: block;
    flex: none;
    width: 100%;
    margin-bottom: 4px;
  }

  .pg-arte-slot .pg-arte { margin-top: 0; }

  .pg-arte-slot .pg-arte-head {
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 10px;
  }

  /* el rotulo se calla: al lado del mock, el boton ya se explica solo */
  .pg-arte-slot .pg-arte-head .pg-detail-label { display: none; }

  /* el boton va solo: el contrato se lee dentro del popup */
  .pg-arte-slot .pg-arte-specs { display: none; }

  .pg-arte-slot .pg-arte-head { align-items: center; }

  .pg-arte-slot .pg-arte-msg,
  .pg-arte-slot .pg-arte-nota {
    margin-top: 6px;
    text-align: right;
  }
}


/* =====================================================================
   POPUP DE SUBIDA (escritorio)
   Dialogo centrado con el contrato, los espacios a llenar y la zona de
   soltar. En movil el mismo papel lo hace el cajon de parrilla-viewer.js.
   ===================================================================== */
.pg-sube {
  position: fixed;
  inset: 0;
  /* por encima del modal de detalle (1000) y del visor movil (1200) */
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 24px;
}

body.pg-sube-abierto { overflow: hidden; }

.pg-sube-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 7, 0.72);
  backdrop-filter: blur(3px);
}

.pg-sube-caja {
  position: relative;
  width: min(520px, 100%);
  max-height: min(86vh, 760px);
  overflow-y: auto;
  padding: 24px 26px 26px;
  border: 1px solid var(--pg-line);
  border-radius: 18px;
  background: var(--pg-surface);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.62);
}

.pg-sube-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pg-sube-kicker {
  margin: 0 0 4px;
  color: var(--pg-accent-soft);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pg-sube-cab h2 {
  margin: 0;
  color: var(--pg-text);
  font-size: 1.12rem;
  font-weight: 600;
}

.pg-sube-x {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--pg-line);
  border-radius: 9px;
  background: transparent;
  color: var(--pg-text-dim);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.pg-sube-x:hover { color: var(--pg-text); border-color: var(--pg-accent); }

.pg-sube-pieza {
  margin: 14px 0 18px;
  color: var(--pg-text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.pg-sube-contrato {
  margin: 0 0 20px;
  padding: 0;
  border-top: 1px solid var(--pg-line);
}

.pg-sube-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--pg-line);
}

.pg-sube-fila dt {
  color: var(--pg-text-dim);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pg-sube-fila dd {
  margin: 0;
  color: var(--pg-text);
  font-size: 0.76rem;
  text-align: right;
}

.pg-sube-rotulo {
  margin: 0 0 9px;
  color: var(--pg-text-dim);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.pg-sube-ranuras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.pg-sube-ranura {
  display: grid;
  place-items: center;
  width: 54px;
  height: 68px;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--pg-accent) 38%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--pg-accent-dim) 14%, var(--pg-surface-2));
}

.pg-sube-ranura.opcional { border-style: dotted; opacity: 0.5; }

.pg-sube-ranura.con-arte {
  border-style: solid;
  border-color: color-mix(in srgb, var(--pg-accent) 58%, transparent);
}

.pg-sube-ranura img { width: 100%; height: 100%; object-fit: cover; }

/* El aspa se descubre al pasar por encima de la lámina. En táctil no hay hover
   que valga, así que ahí vive siempre visible: un control que sólo aparece con
   el cursor es un control que en el teléfono no existe. */
.pg-sube-ranura { position: relative; }

.pg-sube-quitar {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, #000 72%, transparent);
  color: var(--pg-text);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
}

.pg-sube-quitar svg { width: 11px; height: 11px; }

.pg-sube-ranura:hover .pg-sube-quitar,
.pg-sube-ranura:focus-within .pg-sube-quitar {
  opacity: 1;
  transform: scale(1);
}

.pg-sube-quitar:hover,
.pg-sube-quitar:focus-visible {
  background: var(--pg-danger);
  color: #fff;
}

@media (hover: none) {
  .pg-sube-quitar { opacity: 1; transform: scale(1); }
}

.pg-sube-num {
  color: var(--pg-text-dim);
  font-size: 0.74rem;
  font-weight: 700;
}

.pg-sube-zona {
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 22px 18px;
  border: 1px dashed color-mix(in srgb, var(--pg-accent) 44%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--pg-accent-dim) 16%, var(--pg-surface));
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.pg-sube-zona:hover,
.pg-sube-zona:focus-visible,
.pg-sube-zona.encima {
  border-color: var(--pg-accent);
  background: color-mix(in srgb, var(--pg-accent-dim) 32%, var(--pg-surface));
}

.pg-sube-zona b { color: var(--pg-text); font-size: 0.82rem; }
.pg-sube-zona small { color: var(--pg-text-dim); font-size: 0.66rem; }

.pg-sube .pg-arte-msg { margin: 14px 0 0; font-size: 0.74rem; }
.pg-sube[data-estado="trabajando"] .pg-arte-msg { color: var(--pg-accent-soft); }
.pg-sube[data-estado="listo"] .pg-arte-msg { color: var(--pg-ok); }
.pg-sube[data-estado="error"] .pg-arte-msg { color: var(--pg-danger); }

.pg-sube-nota {
  margin: 12px 0 0;
  color: var(--pg-text-dim);
  font-size: 0.66rem;
  line-height: 1.5;
}

/* ---- carrusel: los puntos llevan a su lamina ---- */
.mock-dots .mock-dot {
  padding: 0;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.mock-dots .mock-dot:hover { transform: scale(1.45); }

.mock-dots .mock-dot:focus-visible {
  outline: 2px solid var(--pg-accent);
  outline-offset: 3px;
}

/* Dos pares de flechas conviven en móvil y hacían lo mismo a la vista: las de
   abajo cambian de PIEZA y estas de LÁMINA. Se separan por color — éstas van en
   claro sobre el arte, las del visor siguen oscuras. */
.pg-carousel-nav {
  color: #101010;
}

.pg-carousel-nav::before {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(244, 240, 232, 0.9);
  backdrop-filter: blur(3px);
}

.pg-carousel-nav:hover::before {
  background: #f7f4ee;
}

/* =====================================================================
   YA TIENEN ARTE · franja al principio del calendario
   Son las piezas que el cliente puede publicar hoy porque el arte ya
   existe. Van arriba y con el copy a la vista, no dentro del detalle.
   ===================================================================== */
.pg-listos {
  margin-bottom: 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--pg-line);
}

.pg-listos-cab h3 {
  margin: 0 0 5px;
  color: var(--pg-text);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pg-listos-cab p {
  margin: 0 0 18px;
  max-width: 74ch;
  color: var(--pg-text-dim);
  font-size: 0.74rem;
  line-height: 1.6;
}

.pg-listos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.pg-listo {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 13px;
  padding: 12px;
  border: 1px solid var(--pg-line);
  border-left: 3px solid var(--vd-ink, var(--pg-accent));
  border-radius: 13px;
  background: color-mix(in srgb, var(--vd-surf, var(--pg-surface-2)) 22%, var(--pg-surface));
}

.pg-listo-art {
  overflow: hidden;
  width: 96px;
  height: 120px;
  padding: 0;
  border: 1px solid var(--pg-line);
  border-radius: 9px;
  background: var(--pg-surface-2);
  cursor: pointer;
}

.pg-listo-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-listo-art:hover { border-color: var(--pg-accent); }

.pg-listo-cuerpo { min-width: 0; }

.pg-listo-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 7px;
}

.pg-listo-fecha {
  color: var(--pg-text-dim);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pg-listo-claim {
  margin: 0 0 6px;
  color: var(--pg-text);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.28;
}

.pg-listo-copy {
  margin: 0 0 10px;
  color: var(--pg-text-dim);
  font-size: 0.72rem;
  line-height: 1.55;
  /* El caption va por bloques y asi es como se pega en Instagram. Sin esto los
     saltos colapsan y el cliente juzga un muro de texto que no es el que copia. */
  white-space: pre-line;
}

.pg-listo-pie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.pg-listo-cta {
  color: var(--pg-accent-soft);
  font-size: 0.66rem;
  font-style: italic;
}

@media (max-width: 700px) {
  .pg-listos-grid { grid-template-columns: 1fr; }
  .pg-listo { grid-template-columns: 74px minmax(0, 1fr); }
  .pg-listo-art { width: 74px; height: 94px; }
}

.mock-cuenta {
  margin: 2px 0 0;
  color: var(--pg-text-dim);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
}

/* =====================================================================
   El mismo dialogo de subida, en movil como hoja que sube desde abajo.
   Mismo marcado y mismo JS: cambia el encaje, no el contenido.
   ===================================================================== */
@media (max-width: 900px) {
  .pg-sube {
    display: block;
    padding: 0;
  }

  .pg-sube-caja {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    max-height: 88vh;
    padding: 8px 20px calc(22px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--pg-line);
    border-radius: 20px 20px 0 0;
    animation: pg-sube-entra 260ms cubic-bezier(0.22, 0.9, 0.3, 1);
    overscroll-behavior: contain;
  }

  /* el tirador: dice "esto se arrastra" antes de que nadie lo intente */
  .pg-sube-caja::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    margin: 6px auto 14px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--pg-text-dim) 55%, transparent);
  }

  .pg-sube-cab h2 { font-size: 1.02rem; }
  .pg-sube-x { width: 38px; height: 38px; }
  .pg-sube-ranura { width: 60px; height: 76px; }
  .pg-sube-zona { padding: 26px 18px; }
}

@keyframes pg-sube-entra {
  from { transform: translate3d(0, 100%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .pg-sube-caja { animation: none; }
}

/* =====================================================================
   LÁMINA ACTIVA · el guion de la ficha y el mock apuntan a lo mismo
   La ficha lista las seis láminas y el mock enseña una: sin marca no hay
   forma de saber cuál de las seis se está mirando, y con arte encima el
   texto del slide ni siquiera se ve.
   ===================================================================== */
.pg-guion > li.pulsable {
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.pg-guion > li.pulsable:hover {
  border-color: color-mix(in srgb, var(--pg-accent) 34%, transparent);
}

.pg-guion > li.activa {
  border-color: color-mix(in srgb, var(--pg-accent) 55%, transparent);
  background: color-mix(in srgb, var(--pg-accent) 10%, transparent);
}

.pg-guion > li.activa .pg-guion-t {
  color: var(--pg-accent);
}

/* =====================================================================
   MOCK DE X
   Parte del de Threads porque el esqueleto es el mismo —avatar, columna,
   texto, media—, pero se separa en tres cosas que sí se ven: el handle
   junto al nombre, las cifras al lado de cada icono en vez de en una
   línea aparte, y el contador de vistas, que en X es la métrica que la
   red enseña primero.
   ===================================================================== */
.mock-x {
  border: 1px solid var(--pg-ig-line);
  border-radius: 14px;
  padding: 15px 16px;
  background: #000;
}

.mock-x-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
}

.mock-x-col {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.mock-x-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.mock-x-handle {
  min-width: 0;
  overflow: hidden;
  color: var(--pg-ig-dim);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-x-logo {
  margin-left: auto;
  color: var(--pg-ig-text);
  line-height: 0;
}

.mock-x-body {
  color: var(--pg-ig-text);
  font-size: 0.78rem;
  line-height: 1.44;
  white-space: pre-wrap;
}

.mock-x-media {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 5;
  place-items: center;
  overflow: hidden;
  padding: 22px;
  border: 1px solid var(--pg-ig-line);
  /* X redondea la media más que el resto de las redes */
  border-radius: 16px;
  background:
    radial-gradient(circle at 28% 20%, var(--pg-accent-dim), transparent 44%),
    linear-gradient(150deg, var(--pg-surface-2), var(--pg-bg));
  color: var(--pg-accent-soft);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.mock-x-media.has-art {
  padding: 0;
  color: transparent;
  font-size: 0;
}

/* Las cifras van pegadas al icono: es lo que separa a X de Threads de un
   vistazo, y con espacio repartido caben las cinco sin apretarse. */
.mock-x-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: var(--pg-ig-dim);
}

.mock-x-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 0.64rem;
  line-height: 1;
}

.mock-x-act svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.mock-x-act b {
  font-weight: 500;
}

.mock-x-act.like.active svg {
  fill: var(--pg-ig-heart);
  stroke: var(--pg-ig-heart);
}

.mock-x-act.like.active b {
  color: var(--pg-ig-heart);
}

/* guardar y compartir no llevan cifra en X */
.mock-x-act.fin {
  gap: 12px;
}

/* =====================================================================
   LA RED SELECCIONADA SE ENCIENDE
   Marcarla sólo con el dorado de Validus obligaba a leer la forma del
   glifo para saber dónde estabas. Cada red se enciende con SU color, que
   es el que el ojo ya reconoce sin leer nada, más un halo que la separa
   del resto. El dorado se queda como respaldo para cualquier plataforma
   que se dé de alta sin color propio.
   ===================================================================== */
.pg-plat-dot,
.pg-modal-tab {
  --red: var(--pg-accent);
}

.pg-plat-dot[data-red="ig"],
.pg-modal-tab[data-red="ig"] { --red: #e1306c; }

.pg-plat-dot[data-red="fb"],
.pg-modal-tab[data-red="fb"] { --red: #1877f2; }

.pg-plat-dot[data-red="tiktok"],
.pg-modal-tab[data-red="tiktok"] { --red: #25f4ee; }

/* Threads y X son monocromas por marca: encienden en hueso, que sobre el
   fondo carbón es exactamente lo que hacen en sus propias apps. */
.pg-plat-dot[data-red="threads"],
.pg-plat-dot[data-red="x"],
.pg-modal-tab[data-red="threads"],
.pg-modal-tab[data-red="x"] { --red: #f4f0e8; }

/* ---- carril y barra inferior ---- */
.pg-plat-dot.active {
  border-color: color-mix(in srgb, var(--red) 46%, transparent) !important;
  background: color-mix(in srgb, var(--red) 15%, transparent) !important;
  color: var(--red) !important;
}

.pg-plat-dot.active svg {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--red) 62%, transparent));
}

/* ---- pestañas de escritorio ---- */
.pg-modal-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pg-modal-tab svg {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.72;
  transition: opacity 160ms ease, filter 160ms ease;
}

.pg-modal-tab:hover svg { opacity: 1; }

.pg-modal-tab.active {
  border-color: var(--red);
  color: var(--red);
}

.pg-modal-tab.active svg {
  opacity: 1;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--red) 55%, transparent));
}

@media (prefers-reduced-transparency: reduce) {
  .pg-plat-dot.active svg,
  .pg-modal-tab.active svg { filter: none; }
}

/* =====================================================================
   EL POST COMPLETO EN EL TELÉFONO
   Un 4:5 al ancho de la pantalla dejaba fuera las acciones, los me gusta
   y el copy, y no había señal de que quedara algo abajo. El motor mide el
   alto natural y fija `--esc`; aquí sólo se aplica. Origen arriba y
   centrado para que el post no se despegue de la cabecera al encoger.
   ===================================================================== */
#pg-modal[data-visor="redes"] .pg-plat-slide > * {
  transform: scale(var(--esc, 1));
  transform-origin: top center;
}
/* Edición local de la planeación. No modifica el visor ni el arte publicado. */
.pg-open-editor { margin-left: auto; border: 1px solid var(--pg-accent, #b99562); background: transparent; color: var(--pg-text, #fff); border-radius: 999px; padding: .65rem 1rem; font: inherit; cursor: pointer; }
.pg-editor-root[hidden] { display: none; }
.pg-editor-root { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }
.pg-editor-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.pg-editor { position: relative; width: min(720px, 100%); max-height: calc(100vh - 2rem); overflow: auto; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; background: #1a1714; color: #fff; box-shadow: 0 20px 80px rgba(0,0,0,.5); }
.pg-editor header, .pg-editor footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.pg-editor footer { border-top: 1px solid rgba(255,255,255,.1); border-bottom: 0; flex-wrap: wrap; }
.pg-editor header span, .pg-editor small, .pg-editor-help { color: rgba(255,255,255,.65); }
.pg-editor h2 { margin: .15rem 0 0; font-size: 1.25rem; }
.pg-editor header button, .pg-editor footer button, .pg-editor-actions button { border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: .6rem .8rem; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.pg-editor-actions button[type="submit"] { background: var(--pg-accent, #b99562); color: #19130c; border-color: transparent; }
.pg-editor-form { display: grid; gap: .8rem; padding: 1.25rem; }
.pg-editor-form label { display: grid; gap: .35rem; font-size: .88rem; }
.pg-editor-form input, .pg-editor-form select, .pg-editor-form textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: .65rem; background: #27221e; color: inherit; font: inherit; }
.pg-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.pg-editor-help { margin: 0; font-size: .82rem; }
.pg-editor-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.pg-editor-actions [data-editor-publish], .pg-quick-publish button { border-color: rgba(125, 205, 148, .55); color: #b5efc4; }
.pg-quick-publish { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem .8rem; margin: 0 0 1rem; padding: .7rem .8rem; border: 1px solid rgba(125, 205, 148, .28); border-radius: 9px; background: rgba(83, 153, 99, .11); }
.pg-quick-publish button { border: 1px solid; border-radius: 7px; padding: .48rem .7rem; background: transparent; font: inherit; cursor: pointer; }
.pg-quick-publish small { color: rgba(255,255,255,.62); }
@media (max-width: 560px) { .pg-editor-grid { grid-template-columns: 1fr; } .pg-open-editor { width: 100%; margin-left: 0; } }