/* ============================================================
   PROGRAMADO (#/produccion/programado) — Bloque 2C

   Una tabla y un seg. Los tintes de estado NO son seis colores nuevos: son los mismos
   --e-* / --ambar / --rojo de tokens.css, que es donde se cambia la paleta.
   ============================================================ */

.pg-wrap{ padding:var(--gut); display:flex; flex-direction:column; gap:var(--sp-6); }

.pg-head{ display:flex; align-items:flex-start; gap:var(--sp-6); }
.pg-titulo{ margin:0; font-size:var(--fs-xl); }
.pg-bajada{
  margin:var(--sp-2) 0 0; color:var(--ink-2); font-size:var(--fs-md);
  line-height:var(--lh-base); max-width:78ch;
}

/* ---------- el seg de estados ---------- */
.pg-seg{ display:flex; flex-wrap:wrap; gap:var(--sp-1); }
.pg-seg button{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-sm); color:var(--ink-2);
}
.pg-n{ color:var(--ink-3); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
.pg-seg button.on .pg-n{ color:var(--ink-2); }

/* ---------- avisos ---------- */
.pg-aviso{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-4) var(--sp-5);
  font-size:var(--fs-sm); color:var(--ink-2); white-space:pre-wrap;
}
.pg-aviso.err{ border-color:var(--rojo); color:var(--ink); }

/* ---------- la tabla ---------- */
.pg-tabla{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.pg-tabla th{
  text-align:left; font-weight:600; color:var(--ink-3); font-size:var(--fs-xs);
  padding:var(--sp-2) var(--sp-4); border-bottom:1px solid var(--line);
  text-transform:uppercase; letter-spacing:.04em;
}
.pg-tabla td{
  padding:var(--sp-4); border-bottom:1px solid var(--line-soft);
  color:var(--ink); vertical-align:top;
}
.pg-tabla tbody tr:hover{ background:var(--s1); }
.pg-dim{ color:var(--ink-3); }
.pg-id{ font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink-3); }

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

/* El tinte por estado. `programado` y `borrador` comparten forma y no color: uno tiene
   fecha y el otro no, y esa es toda la diferencia que importa mirando la tabla. */
.pg-estado{
  display:inline-block; padding:1px var(--sp-3); border-radius:var(--r-xs);
  font-size:var(--fs-xs); font-weight:600;
  color:var(--et-ink, var(--ink-2)); background:var(--et-dim, transparent);
  border:1px solid var(--et, var(--line));
}
.pg-estado[data-estado="programado"]{ --et:var(--e-prog); --et-ink:var(--e-prog-ink); --et-dim:var(--e-prog-dim); }
.pg-estado[data-estado="en_duda"]{ --et:var(--ambar); --et-ink:var(--ambar-ink); --et-dim:var(--ambar-dim); }
.pg-estado[data-estado="publicado"]{ --et:var(--e-num); --et-ink:var(--e-num-ink); --et-dim:var(--e-num-dim); }
.pg-estado[data-estado="bajado"]{ --et:var(--ink-3); --et-ink:var(--ink-3); }
.pg-estado[data-estado="fallado"]{ --et:var(--rojo); --et-ink:var(--rojo-ink); }
.pg-estado[data-estado="borrador"]{ --et:var(--ink-3); --et-ink:var(--ink-3); }
.pg-estado[data-estado="cancelado"]{ --et:var(--ink-3); --et-ink:var(--ink-3); }

.pg-chip-duda{
  margin-left:var(--sp-2); font-size:var(--fs-micro); color:var(--ambar-ink);
  border:1px solid var(--ambar-dim); border-radius:var(--r-xs); padding:0 var(--sp-2);
}
.pg-error{
  margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--ink-3);
  max-width:44ch; line-height:var(--lh-tight);
}

.pg-acc{ white-space:nowrap; }
.pg-acc .pg-b{
  display:inline-block; margin-left:var(--sp-2); font-size:var(--fs-xs);
  padding:2px var(--sp-3); border:1px solid var(--line); border-radius:var(--r-xs);
  background:none; color:var(--ink-2); cursor:pointer; text-decoration:none;
}
.pg-acc .pg-b:first-child{ margin-left:0; }
.pg-acc .pg-b:hover{ color:var(--ink); border-color:var(--line-soft); }
.pg-acc .pg-danger:hover{ color:var(--rojo-ink); border-color:var(--rojo); }

.pg-mas{ margin-top:var(--sp-4); font-size:var(--fs-xs); color:var(--ink-3); }

/* ---------- vacío y pie ---------- */
.pg-vacio{ color:var(--ink-2); font-size:var(--fs-md); line-height:var(--lh-base); max-width:78ch; }
.pg-vacio p{ margin:var(--sp-3) 0 0; }
.pg-pie{
  margin:0; color:var(--ink-3); font-size:var(--fs-xs); line-height:var(--lh-base);
  max-width:78ch; border-top:1px solid var(--line-soft); padding-top:var(--sp-4);
}

/* ---------- la confirmación que llega del drawer ---------- */
.pg-confirm{
  border:1px solid var(--turquesa-line); background:var(--turquesa-dim);
  border-radius:var(--r-md); padding:var(--sp-5) var(--sp-6);
  font-size:var(--fs-md); line-height:var(--lh-base);
}
.pg-confirm p{ margin:var(--sp-2) 0 0; color:var(--ink-2); }
.pg-confirm-acc{ margin-top:var(--sp-4); display:flex; flex-wrap:wrap; gap:var(--sp-5); }

/* 390: la tabla no cabe en seis columnas. Se dejan Pieza, Estado y las acciones, y el resto
   pasa a la línea de abajo de la primera celda — sin esconder ningún dato. */
@media (max-width:700px){
  .pg-wrap{ padding:var(--sp-6); }
  .pg-tabla, .pg-tabla thead, .pg-tabla tbody, .pg-tabla tr, .pg-tabla td{ display:block; width:auto; }
  .pg-tabla thead{ display:none; }
  .pg-tabla tr{ border-bottom:1px solid var(--line); padding:var(--sp-4) 0; }
  .pg-tabla td{ border:none; padding:1px 0; }
  .pg-acc{ white-space:normal; margin-top:var(--sp-3); }
  .pg-acc .pg-b{ margin:0 var(--sp-2) var(--sp-2) 0; }
}