/* Contenido › Guion (16-17/10). Mockup aprobado: sesiones/2026-10-16-guiones/mockup (repo del agente). Todo cuelga de
   #page-contenido-guion. Owner 16/10: peso máximo 600 (SemiBold) y espacios aireados. */
#page-contenido-guion {
  --gu-line: var(--line, var(--border));
  --gu-line-2: var(--line-2, var(--border));
  --gu-card: var(--card, var(--bg-card));
  --gu-bg: var(--bg, var(--bg-main));
  --gu-ink: var(--ink, var(--text));
  --gu-ink-2: var(--ink-2, var(--text-muted));
  --gu-ink-3: var(--ink-3, var(--text-muted));
  --gu-dom: var(--dom-contenido, oklch(60% 0.15 300));
  --gu-dom-soft: var(--dom-contenido-soft, oklch(60% 0.15 300 / .15));
  --gu-warn: var(--warn, oklch(70% 0.15 80));
  --gu-warn-soft: var(--warn-soft, oklch(75% 0.15 80 / .18));
  --gu-go: var(--go, oklch(70% 0.14 160));
  --gu-go-soft: var(--go-soft, oklch(70% 0.14 160 / .18));
  --gu-link: var(--link, var(--gu-dom));
  --font-serif: var(--sans); --cnt-tar-mag: #ff2d8a; --cnt-tar-blue: #5aa2f5; --cnt-tar-vio: #9a7bff; --cnt-tar-gold: #e8b84a;
}
#page-contenido-guion .qc-page-body { display: block; overflow: visible; }
#page-contenido-guion [hidden] { display: none !important; }
#page-contenido-guion h1, #page-contenido-guion b, #page-contenido-guion .cnt-tar-btn { font-weight: 600; }
#page-contenido-guion a { color: var(--gu-link); }
.gu-vacio, .gu-meta { color: var(--gu-ink-3); font-size: 13px; margin: 0; }
.gu-vacio { padding: 24px 0; }
.gu-chip { font-size: 11.5px; font-weight: 500; border-radius: 99px; padding: 1px 9px; background: var(--gu-dom-soft); color: var(--gu-dom); white-space: nowrap; }
.gu-chip.gris { background: var(--gu-bg); color: var(--gu-ink-3); border: 1px solid var(--gu-line); }
.gu-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* cabecera */
.gu-cab { display: grid; gap: 10px; margin-bottom: 16px; }
.gu-volver { justify-self: start; border: 0; background: none; color: var(--gu-ink-2); font-size: 13px; padding: 2px 0; cursor: pointer; }
.gu-volver:hover { color: var(--gu-ink); }
.gu-origen { font-size: 13px; color: var(--gu-ink-2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gu-ctl { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.gu-seg { display: inline-flex; border: 1px solid var(--gu-line-2); border-radius: 8px; overflow: hidden; }
.gu-seg button { border: 0; background: var(--gu-card); color: var(--gu-ink-2); padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
.gu-seg button[aria-pressed="true"] { background: var(--gu-dom-soft); color: var(--gu-dom); font-weight: 600; }
.gu-estado { font-size: 12px; color: var(--gu-ink-3); }
.gu-trab { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--gu-dom); margin: 0; padding: 6px 0; }
.gu-trab i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gu-dom); border-right-color: transparent; animation: gu-gira .8s linear infinite; flex: none; }
@keyframes gu-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gu-trab i { animation: none; } }
.gu-verif { border: 1px solid var(--gu-line-2); border-radius: 10px; padding: 10px 14px; font-size: 13px; background: var(--gu-card); display: grid; gap: 6px; }
.gu-verif.ok { border-color: var(--gu-go); }
.gu-verif.ojo { border-color: var(--gu-warn); }
.gu-verif ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.gu-prop { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; border: 1px solid var(--gu-dom); background: var(--gu-dom-soft); border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.gu-aviso { margin: 0; font-size: 12.5px; border: 1px dashed var(--gu-line-2); border-radius: 9px; padding: 8px 12px; color: var(--gu-ink-2); }

/* editor */
.gu-ed { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.gu-bloques { display: grid; gap: 12px; min-width: 0; }
.gu-bl { background: var(--gu-card); border: 1px solid var(--gu-line); border-radius: 12px; padding: 12px 14px 14px; display: grid; gap: 8px; transition: border-color .2s, box-shadow .2s; }
.gu-bl.activo { border-color: var(--gu-line-2); box-shadow: 0 0 0 2px var(--gu-dom-soft); }
.gu-bl > header, .gu-paso > header { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.gu-t { display: flex; gap: 0 8px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.gu-t b { font-size: 12.5px; letter-spacing: .03em; }
.gu-t i { font-style: normal; font-size: 12px; color: var(--gu-ink-3); }
.gu-porc { color: var(--gu-dom); font-size: 12px; }
.gu-acc { display: flex; gap: 4px; flex: none; }
.gu-acc button { border: 1px solid transparent; background: none; border-radius: 7px; padding: 3px 8px; font-size: 12.5px; color: var(--gu-ink-2); cursor: pointer; white-space: nowrap; }
.gu-acc button:hover, .gu-acc button[aria-expanded="true"] { border-color: var(--gu-line-2); }
.gu-acc .gu-car { color: var(--gu-dom); }
.gu-ind { width: 100%; border: 0; border-bottom: 1px dashed var(--gu-line-2); background: none; color: var(--gu-ink-2); font-size: 12.5px; padding: 3px 0; }
.gu-ind:focus { outline: none; border-bottom-color: var(--gu-dom); }
.gu-dice { width: 100%; border: 1px solid var(--gu-line-2); background: var(--gu-bg); color: var(--gu-ink); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; min-height: 46px; }
.gu-dice:focus { outline: 2px solid var(--gu-dom-soft); border-color: var(--gu-dom); }
.gu-pie { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--gu-ink-3); }
.gu-sin { color: var(--gu-ink-3); }
.gu-cita { display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; border: 1px solid var(--gu-line-2); border-radius: 99px; padding: 0 4px 0 8px; background: var(--gu-bg); white-space: nowrap; margin: 1px 0; }
.gu-cita a { text-decoration: none; color: var(--gu-ink-2); }
.gu-cita a:hover { color: var(--gu-link); text-decoration: underline; }
.gu-cita-x { border: 0; background: none; color: var(--gu-ink-3); cursor: pointer; padding: 0 4px; font-size: 13px; line-height: 1; }
.gu-faltan { font-size: 12px; color: var(--gu-ink-2); }
.gu-faltan b { color: var(--gu-warn); background: var(--gu-warn-soft); border-radius: 4px; padding: 0 4px; font-weight: 600; }
.gu-alerta { margin: 0; font-size: 12.5px; border: 1px solid var(--gu-warn); background: var(--gu-warn-soft); border-radius: 8px; padding: 6px 10px; color: var(--gu-ink); }
.gu-alerta b { color: var(--gu-warn); }
.gu-marca { background: var(--gu-warn-soft); color: var(--gu-warn); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.gu-pasos { display: grid; gap: 10px; }
.gu-paso { border: 1px solid var(--gu-line); border-radius: 10px; padding: 9px 11px; display: grid; gap: 6px; background: var(--gu-bg); }
.gu-paso > header b { font-size: 12.5px; color: var(--gu-ink-2); }
.gu-paso .gu-dice { background: var(--gu-card); }
.gu-mas { border: 1px dashed var(--gu-line-2); background: none; border-radius: 9px; padding: 7px; font-size: 13px; color: var(--gu-ink-2); cursor: pointer; }
.gu-mas:hover { color: var(--gu-ink); border-color: var(--gu-dom); }
.gu-intro-mas { justify-self: start; padding: 6px 12px; }
.gu-pant { display: grid; gap: 6px; }
.gu-pl { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.gu-pl .gu-alerta { grid-column: 1 / -1; }
.gu-plt { border: 1px solid var(--gu-line-2); background: var(--gu-bg); color: var(--gu-ink); border-radius: 7px; padding: 5px 9px; font-weight: 600; letter-spacing: .02em; min-width: 0; }
.gu-plen { border: 1px solid var(--gu-line-2); background: var(--gu-card); color: var(--gu-ink-2); border-radius: 7px; padding: 5px 9px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.gu-pop { display: grid; gap: 2px; padding: 4px; min-width: 200px; }
.gu-pop-op { text-align: left; border: 0; background: none; color: inherit; padding: 7px 10px; border-radius: 7px; font: inherit; font-size: 13px; cursor: pointer; }
.gu-pop-op:hover, .gu-pop-op[aria-selected="true"] { background: var(--dom-contenido-soft, oklch(60% 0.15 300 / .15)); }
.gu-plx { border: 0; background: none; color: var(--gu-ink-3); cursor: pointer; font-size: 16px; padding: 0 6px; }
/* regenerar un bloque */
.gu-alts { border: 1px solid var(--gu-dom); border-radius: 10px; padding: 9px; display: grid; gap: 7px; background: var(--gu-bg); }
.gu-alts > p { margin: 0; font-size: 12.5px; color: var(--gu-ink-3); }
.gu-alt { text-align: left; border: 1px solid var(--gu-line-2); border-radius: 8px; background: var(--gu-card); color: var(--gu-ink); padding: 8px 10px; display: grid; gap: 3px; font: inherit; font-size: 13.5px; cursor: pointer; }
.gu-alt:hover { border-color: var(--gu-go); }
.gu-alt small { color: var(--gu-ink-3); font-size: 12px; }
.gu-pedidos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.gu-libre { display: flex; gap: 6px; flex: 1 1 260px; }
.gu-libre input { flex: 1; min-width: 0; border: 1px solid var(--gu-line-2); background: var(--gu-card); color: var(--gu-ink); border-radius: 8px; padding: 5px 9px; }
/* notas al costado */
.gu-aside { position: sticky; top: 12px; display: grid; gap: 12px; }
.gu-caja { background: var(--gu-card); border: 1px solid var(--gu-line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 9px; }
.gu-caja h3 { font-size: 11.5px; margin: 0; color: var(--gu-ink-3); letter-spacing: .06em; font-weight: 600; }
.gu-dur { font-size: 12.5px; color: var(--gu-ink-2); gap: 0; }
.gu-dur b { font-size: 19px; color: var(--gu-ink); }
.gu-fuente { font-size: 13px; line-height: 1.45; display: grid; gap: 3px; border-top: 1px solid var(--gu-line); padding-top: 9px; }
.gu-caja h3 + .gu-fuente { border-top: 0; padding-top: 0; }
.gu-fuente > b a { text-decoration: none; }
.gu-fuente > b a:hover { text-decoration: underline; }
.gu-fuente small { color: var(--gu-ink-3); font-size: 11.5px; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.gu-citar { padding: 2px 9px !important; min-height: 0 !important; font-size: 12px !important; }
.gu-falta { margin: 0; padding-left: 18px; font-size: 12.5px; display: grid; gap: 3px; }
.gu-sug summary { cursor: pointer; font-size: 12.5px; color: var(--gu-ink-2); }
.gu-sug p { margin: 4px 0 0; font-size: 12.5px; }
.gu-movil { display: none; }
/* barra de abajo */
.gu-acciones { position: sticky; bottom: 0; margin-top: 16px; padding: 10px 0; background: color-mix(in srgb, var(--gu-bg) 92%, transparent); border-top: 1px solid var(--gu-line); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; z-index: 3; }
.gu-acciones small { color: var(--gu-ink-3); font-size: 12px; }

@media (max-width: 900px) {
  .gu-ed { grid-template-columns: minmax(0, 1fr); }
  .gu-aside { display: none; }
  .gu-movil { display: block; background: var(--gu-card); border: 1px solid var(--gu-line); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
  .gu-movil summary { font-weight: 600; cursor: pointer; }
  .gu-movil .gu-caja { border: 0; padding: 10px 0 0; background: none; }
  .gu-acciones small { display: none; }
  .gu-acciones .gu-fila { width: 100%; }
  .gu-acciones .cnt-tar-btn { flex: 1; white-space: nowrap; }
  .gu-t i { flex-basis: 100%; }
  .gu-pl { grid-template-columns: minmax(0, 1fr) auto; }
  .gu-plen { grid-column: 1; grid-row: 2; justify-self: start; }
  .gu-prop .gu-fila { width: 100%; }
}

/* La ficha de la pieza (panel de la capa común) y la tarjeta del calendario: guion por bloques y fuentes con link. */
.cnt-pz-guion { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12.5px; border: 1px dashed var(--line-2, var(--border)); border-radius: 9px; padding: 8px 12px; margin: 4px 0 12px; color: var(--ink-2, var(--text-muted)); }
.cnt-pz-guion .cnt-tar-btn { font-weight: 600; }
.cnt-pz-fuentes { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.cnt-pz-fuentes a { font-weight: 600; text-decoration: none; }
.cnt-pz-fuentes a:hover { text-decoration: underline; }
.co-cfs { display: block; font-size: 10.5px; color: var(--ink-3, var(--text-muted)); margin-top: 2px; }

/* los inputs de Central tienen su propio estilo: acá manda el del editor */
#page-contenido-guion .gu-ind { width: 100%; border: 0; border-bottom: 1px dashed var(--gu-line-2); border-radius: 0; background: none; color: var(--gu-ink-2); font-size: 12.5px; padding: 3px 0; box-shadow: none; min-height: 0; }
#page-contenido-guion .gu-ind:focus { outline: none; border-bottom-color: var(--gu-dom); }
#page-contenido-guion .gu-dice { width: 100%; border: 1px solid var(--gu-line-2); background: var(--gu-bg); color: var(--gu-ink); border-radius: 8px; padding: 9px 11px; font-size: 14px; line-height: 1.5; resize: vertical; min-height: 46px; overflow: hidden; }
#page-contenido-guion .gu-paso .gu-dice { background: var(--gu-card); }
#page-contenido-guion .gu-plt, #page-contenido-guion .gu-libre input { min-height: 0; box-shadow: none; }
.gu-verif .gu-fila .gu-chip { flex: none; }

.gu-adv { border-color: var(--gu-warn); background: var(--gu-warn-soft); }
.gu-adv p { margin: 0; font-size: 13.5px; }

.gu-dol { font-size: 12.5px; display: grid; gap: 3px; border-top: 1px solid var(--gu-line); padding-top: 8px; }
.gu-caja h3 + .gu-dol { border-top: 0; padding-top: 0; }
.gu-dol b { display: flex; justify-content: space-between; gap: 8px; }
.gu-dol b span:last-child { white-space: nowrap; flex: none; }
.gu-dol small { color: var(--gu-ink-3); }
.gu-dol .gu-citar { justify-self: start; }