/* Playlist editor — page-specific styles only. Design tokens, base components (.btn/.input/
   .tag/.radio) and the shared nav/title-bar chrome live in carteleria.css; this page's root
   element carries both `carteleria-app` (tokens+base) and `pe-page` (the 100vh/overflow:hidden
   layout it needs for the internal 3-column + timeline panels). */

.pe-editor { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.pe-top { display: grid; grid-template-columns: 232px minmax(0,1fr) 316px; flex: none; height: 44%; min-height: 280px; border-bottom: 2px solid var(--color-divider); overflow: hidden; }

/* Folder sidebar + media grid: shared with Biblioteca de medios (same 3-column anatomy per the
   handoff), so those rules (.cn-folders*/.cn-library*/.cn-media-card*) live in carteleria.css. */

/* .cn-preview-monitor/-kind/-name (the dark 16:9 placeholder) live in carteleria.css — shared
   with Biblioteca de medios' detail column and Detalle de medio's preview. */

/* — Propiedades panel (layout template + zone map, collage playlists only) — */
.pe-properties { border-bottom: 2px solid var(--color-divider); flex: none; }
.pe-properties-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
/* Rejilla y no una fila: el nombre de la plantilla dice su formato ("H · Digibar con zocalo:
   principal 16:9 + lateral 1:2") y en una sola fila, apretado entre la etiqueta y el selector,
   se partia en una palabra por renglon. Aca la etiqueta se queda con la primera columna y todo lo
   demas — nombre y selector — baja por la segunda, uno debajo del otro.

   El selector lleva ancho explicito porque su ancho natural es el de su opcion mas larga, y sus
   opciones son los nombres de las plantillas: sin esto empuja la columna del nombre a cero y el
   nombre se parte letra por letra. Por el mismo motivo la celda se la queda el <form> y no el
   <select>: el form no siempre termina con display:contents, asi que se lo posiciona a el. */
.pe-properties-layout-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px;
  align-items: baseline; font-size: 13px;
}
.pe-properties-layout-name { grid-column: 2; font-weight: 600; overflow-wrap: anywhere; }
.pe-properties-layout-row > form { grid-column: 2; min-width: 0; width: 100%; }
.pe-properties-change {
  width: 100%; max-width: 100%; appearance: none; background: none; border: none;
  color: var(--color-accent-700); font-weight: 600; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer;
}

/* — zone section heading in the timeline (only shown when a template has more than one zone) — */
.pe-zone-heading {
  display: flex; align-items: center; gap: 8px; padding: 8px 20px;
  background: var(--color-surface); border-bottom: 1px solid var(--color-divider);
  border-top: 2px solid var(--color-divider);
}
.pe-zone-heading:first-child { border-top: none; }
.pe-zone-heading-n {
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  width: 20px; height: 20px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-text); color: var(--color-bg);
}
.pe-zone-heading-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-neutral-700); }
/* Medida que deberia tener una pieza hecha para esta zona, a la resolucion de referencia de la
   plantilla. Va al margen derecho pero con recuadro: es el dato con el que se exporta el material,
   y en gris claro se perdia contra la regla de tiempos que tiene justo debajo. */
.pe-zone-heading-target {
  margin-left: auto; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--color-neutral-700); border: 1px solid var(--color-divider); padding: 2px 8px;
}

.pe-preview { display: flex; flex-direction: column; min-height: 0; }
.pe-preview-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--color-divider); flex: none; }
.pe-preview-res { margin-left: auto; font-size: 11px; color: var(--color-neutral-700); }
.pe-preview-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.pe-preview-controls { display: flex; align-items: center; gap: 8px; }
.pe-preview-controls svg { width: 14px; height: 14px; }
.pe-preview-pos { margin-left: auto; font-size: 11px; color: var(--color-neutral-700); }
/* Resolucion de la pieza elegida. Etiqueta a la izquierda y cifra a la derecha, como las filas de
   propiedades del resto del admin, para que se lea de un vistazo contra la medida de la pantalla
   que encabeza el panel. */
.pe-preview-dims {
  display: flex; justify-content: space-between; gap: 8px; font-size: 11px;
  color: var(--color-neutral-700); border-top: 1px solid var(--color-divider); padding-top: 10px;
}
.pe-preview-dims span:last-child { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.pe-preview-assigned { border-top: 1px solid var(--color-divider); padding-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.pe-preview-assigned-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.pe-timeline-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pe-timeline-header { display: flex; align-items: center; gap: 14px; padding: 10px 20px; border-bottom: 1px solid var(--color-divider); flex: none; }
.pe-timeline-hint { font-size: 11px; color: var(--color-neutral-700); }
.pe-timeline-controls { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.pe-zoom { display: flex; align-items: center; gap: 7px; }
.pe-zoom span { font-size: 11px; color: var(--color-neutral-700); }
.pe-zoom input { width: 96px; }

/* — switch (Mostrar duración) — */
.pe-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--color-neutral-700); }
.pe-switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.pe-switch-track {
  width: 34px; height: 18px; flex: none; border-radius: 999px;
  background: var(--color-neutral-400); position: relative; transition: background .15s;
}
.pe-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--color-bg); transition: transform .15s;
}
.pe-switch input:checked + .pe-switch-track { background: var(--color-accent); }
.pe-switch input:checked + .pe-switch-track::after { transform: translateX(16px); }
.pe-switch input:focus-visible + .pe-switch-track { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.pe-timeline-body { flex: 1; overflow: auto; min-height: 0; padding-bottom: 24px; }

/* — time ruler — */
.pe-track-ruler {
  position: relative; height: 20px; margin: 10px 20px 0;
  border-bottom: 1px solid var(--color-divider);
}
.pe-ruler-tick { position: absolute; top: 0; font-size: 10px; color: var(--color-neutral-700); transform: translateX(3px); }

/* — single-line track per grid block: one horizontal row per zone, items laid end-to-end
   left-to-right in playback order (first item first). Reordering drags a clip past its
   siblings along this one line instead of moving between stacked per-item rows. — */
.pe-track-wrap { overflow-x: auto; margin: 0 20px 4px; }
.pe-track { position: relative; height: 64px; }

.pe-track-insert {
  position: absolute; top: 0; bottom: 0; width: 3px; background: var(--color-accent);
  opacity: 0; pointer-events: none; z-index: 2; transition: left .05s linear;
}
.pe-track-insert.active { opacity: 1; }

.pe-clip {
  position: absolute; top: 4px; height: 56px; display: flex; align-items: center; gap: 8px;
  padding: 0 8px; border: 1px solid var(--color-divider); border-radius: 4px;
  background: var(--color-surface); cursor: grab; user-select: none; overflow: hidden;
}
.pe-clip.selected { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.pe-clip.dragging { opacity: .4; }

.pe-clip-n {
  flex: none; font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  background: var(--color-text); color: var(--color-bg);
}
.pe-clip-thumb { flex: none; width: 40px; height: 40px; background: var(--color-neutral-300); display: grid; place-items: center; overflow: hidden; }
.pe-clip-thumb img, .pe-clip-thumb video { width: 100%; height: 100%; object-fit: contain; }
.pe-clip-thumb svg { width: 16px; height: 16px; }

.pe-clip-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.pe-clip-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-clip-dur { font-size: 11px; color: var(--color-neutral-700); }

/* Marca de encuadre. Siempre visible (a diferencia de las acciones, que aparecen al pasar por
   encima): avisa de algo que esta mal en la pieza, y si hay que buscarlo con el mouse no avisa.
   Ambar cuando la pieza no llena la zona o esta ampliada, gris cuando solo se le recorta un borde
   dentro de lo tolerado — eso ultimo es informacion, no un problema. */
.pe-clip-warn { flex: none; width: 16px; height: 16px; display: grid; place-items: center; }
.pe-clip-warn svg { width: 14px; height: 14px; }
.pe-clip-warn-warn { color: var(--color-accent-700); }
.pe-clip-warn-info { color: var(--color-neutral-600); }

.pe-clip-fit { display: contents; }
.pe-clip-fit-select {
  appearance: none; height: 20px; border: none; cursor: pointer;
  padding: 0 4px; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: var(--color-text); background: none;
}
.pe-clip-fit-select:hover { background: var(--color-accent-100); }

/* Se apoya sobre el contenido del clip, asi que va opaca y con contorno: encimada y translucida
   sobre el nombre de la pieza no se leia ninguna de las dos cosas. */
.pe-clip-actions {
  position: absolute; top: 2px; right: 2px; display: flex; align-items: center; gap: 2px;
  opacity: 0; transition: opacity .1s;
  background: var(--color-surface); outline: 1px solid var(--color-divider); outline-offset: -1px;
}
.pe-clip:hover .pe-clip-actions, .pe-clip.selected .pe-clip-actions { opacity: 1; }
.pe-clip-action {
  appearance: none; border: none; width: 20px; height: 20px; display: grid; place-items: center;
  background: none; cursor: pointer;
}
.pe-clip-action:hover { background: var(--color-accent-100); }
.pe-clip-action svg { width: 12px; height: 12px; }

.pe-clip-resize {
  position: absolute; top: 0; right: 0; width: 8px; height: 100%;
  cursor: ew-resize; background: color-mix(in srgb, var(--color-text) 20%, transparent);
}
.pe-clip-resize:hover, .pe-clip-resize:active { background: var(--color-accent); }

/* — «Ajustar a la zona»: deja una copia de la pieza en la medida exacta de su zona —————————
   El dialogo nativo ya trae el fondo modal y el foco atrapado; lo unico que se le da es la caja,
   porque el navegador la centra pero no la viste. */
.zf-dialog {
  width: min(560px, calc(100vw - 32px)); padding: 20px;
  border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text);
}
.zf-dialog::backdrop { background: color-mix(in srgb, var(--color-text) 45%, transparent); }
.zf-title { margin: 0 0 4px; }
.zf-summary { margin: 0 0 14px; font-size: 12px; color: var(--color-neutral-700); }

.zf-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zf-mode {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px; cursor: pointer;
  border: 1px solid var(--color-divider);
}
.zf-mode:has(input:checked) { border: 2px solid var(--color-accent); padding: 9px; }
.zf-mode span { display: flex; flex-direction: column; gap: 2px; }
.zf-mode strong { font-size: 13px; }
.zf-mode small { font-size: 11px; color: var(--color-neutral-700); }

/* El atributo hidden no le gana a un display explicito, asi que las dos filas que se muestran
   segun el modo tienen que apagarlo a mano: sin esto, recortando se seguia viendo el color del
   relleno (que ahi no rellena nada) y extendiendo, el deslizador de acercar. */
.zf-color[hidden], .zf-zoom[hidden] { display: none; }
.zf-color { display: flex; align-items: center; gap: 16px; margin-top: 12px; font-size: 12px; }
.zf-color label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.zf-transparent { color: var(--color-neutral-700); }
.zf-color input { width: 44px; height: 24px; padding: 0; border: 1px solid var(--color-divider); background: none; }

/* El damero se ve por debajo de lo que el canvas deje transparente, que es como se nota de un
   vistazo si la pieza tapa toda la zona o no. */
.zf-preview {
  margin-top: 12px; padding: 8px; display: grid; place-items: center;
  background-color: var(--color-neutral-200);
  background-image:
    linear-gradient(45deg, var(--color-neutral-300) 25%, transparent 25%, transparent 75%, var(--color-neutral-300) 75%),
    linear-gradient(45deg, var(--color-neutral-300) 25%, transparent 25%, transparent 75%, var(--color-neutral-300) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
}
/* touch-action: none — sin esto, en una pantalla tactil el navegador se queda el gesto para
   desplazar la pagina y la pieza no se mueve. */
.zf-preview canvas { max-width: 100%; max-height: 260px; display: block; cursor: grab; touch-action: none; }
.zf-preview canvas:active { cursor: grabbing; }

.zf-zoom { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; }
.zf-zoom label { display: flex; align-items: center; gap: 8px; flex: 1; }
.zf-zoom input[type="range"] { flex: 1; accent-color: var(--color-accent); }
.zf-center {
  appearance: none; border: none; background: none; cursor: pointer; padding: 0;
  color: var(--color-accent-700); font-weight: 600; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase;
}

.zf-hint { margin: 6px 0 0; font-size: 11px; color: var(--color-neutral-600); }

.zf-note { margin: 10px 0 0; font-size: 12px; color: var(--color-neutral-700); min-height: 16px; }
.zf-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }