/* ============================================================
   PLAN DE SALIDA — la matriz contenido × red del paso Salida (Bloque 5)

   Sin colores nuevos: los mismos --ink-*, --line*, --ok/--ambar/--rojo de tokens.css que
   usan Programado y Publicar. Lo único propio es la grilla, porque la matriz es lo que esta
   pantalla aporta.
   ============================================================ */

#pz-plan{ display:flex; flex-direction:column; gap:var(--sp-4); margin:var(--sp-6) 0; }

.ps-sec{
  font-size:var(--fs-xs); font-weight:600; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.04em;
}
.ps-gris{ color:var(--ink-3); font-size:var(--fs-xs); line-height:var(--lh-base); margin:0; }
.ps-ok{ color:var(--turquesa-ink); font-size:var(--fs-xs); }
.ps-err{ color:var(--rojo-ink); font-size:var(--fs-xs); line-height:var(--lh-base); }

/* El cartel del caso borde de LinkedIn (dos formatos, un solo texto). Ámbar y no rojo: no
   está mal, hay que mirarlo. */
.ps-ojo{
  color:var(--ink-2); font-size:var(--fs-xs); line-height:var(--lh-base);
  border-left:2px solid var(--ambar); padding-left:var(--sp-2); margin-top:var(--sp-2);
}
.ps-aviso{
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); color:var(--ink-2);
  margin:0; white-space:pre-wrap;
}

/* ---------- la matriz ---------- */

.ps-tabla{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.ps-tabla th{
  text-align:left; font-weight:600; color:var(--ink-3); font-size:var(--fs-xs);
  padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--line);
  text-transform:uppercase; letter-spacing:.04em;
}
.ps-tabla td{
  padding:var(--sp-3); border-bottom:1px solid var(--line-soft);
  vertical-align:top; color:var(--ink);
}
.ps-th-cont{ width:24%; }
.ps-cont-nom{ font-weight:600; }
.ps-cont input[type="datetime-local"]{
  margin-top:var(--sp-2); width:100%; max-width:15rem; font-size:var(--fs-xs);
}

/* Una celda es clickeable: abre su detalle abajo. El cursor lo dice. */
.ps-celda{ cursor:pointer; }
.ps-red{ display:none; font-size:var(--fs-xs); color:var(--ink-3); font-weight:600; }
.ps-celda:hover{ background:var(--s1); }
.ps-sel{ background:var(--s1); box-shadow:inset 2px 0 0 var(--turquesa-ink); }

.ps-tilde{ display:flex; align-items:center; gap:var(--sp-2); cursor:pointer; }
.ps-cuando{ font-variant-numeric:tabular-nums; }

/* La que no puede salir: gris, con lo que le falta y el atajo para arreglarlo. Se muestra
   siempre — esconderla se lee como «todavía no lo hicimos». */
.ps-no{ color:var(--ink-3); }
.ps-no-txt{ font-size:var(--fs-xs); line-height:var(--lh-base); }
.ps-ya{ color:var(--ink-2); }
.ps-ya-txt{ font-weight:600; font-size:var(--fs-xs); }

.ps-link{
  background:none; border:none; padding:0; font:inherit; cursor:pointer;
  color:var(--turquesa-ink); text-decoration:none; font-size:var(--fs-xs);
}
.ps-link:hover{ text-decoration:underline; }

/* ---------- el detalle de la celda elegida ---------- */

.ps-detalle{
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3);
}
.ps-preview{
  margin:0; max-height:11rem; overflow:auto; white-space:pre-wrap; word-break:break-word;
  font-family:var(--f-mono); font-size:var(--fs-xs); line-height:var(--lh-base);
  color:var(--ink-2); background:var(--s1); border-radius:var(--r-xs); padding:var(--sp-3);
}
.ps-acc{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
.ps-cuenta{ max-width:20rem; font-size:var(--fs-sm); }

/* ---------- el pie ---------- */

.ps-pie{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }

@media (max-width:640px){
  /* En el celular la matriz no entra: las columnas se apilan y cada celda pasa a decir de
     qué red es con su propio renglón (.ps-red), que en escritorio está oculto porque lo
     dice la cabecera de la columna. */
  .ps-tabla, .ps-tabla tbody, .ps-tabla tr, .ps-tabla td{ display:block; width:auto; }
  .ps-tabla thead{ display:none; }
  .ps-tabla tr{ border-bottom:1px solid var(--line); padding-bottom:var(--sp-3); }
  .ps-tabla td{ border-bottom:none; padding:var(--sp-2) 0; }
  .ps-red{ display:block; }
}