/* ============================================================
   TRAER MATERIAL · los dos caminos de entrada que arrancan en Ideas

   Hay UN solo botón ("Traer material…") y la decisión se toma adentro, en un chooser cuyo
   eje es el TIEMPO VERBAL: "ya está escrito" (va derecho a Contenidos) contra "hay que
   escribirlo" (queda en Ideas como dossier). Dos botones rotulados "subir madre" y "subir
   fuentes" son dos veces la misma frase para quien no tiene el modelo mental del pipeline.

   LOS COLORES NO SON DECORACIÓN. Turquesa ya es el color de pieza terminada/aprobada en
   esta app (.estado-aprobado, .badge-slug) y ámbar el de en-curso/atención (--ambar). El
   camino que produce una pieza sale turquesa y el que produce material sale ámbar, así el
   color repite lo que dice el texto en vez de contradecirlo.

   TODO EL CHASIS DE DIÁLOGO ES .dlg / .dlg-fondo DE /base.css. Acá no se define ni un
   overlay ni una caja nueva: lo único que se agrega es .tr-dlg, que pisa el `width` de 400px
   —alcanza para un confirm, no para un texto extraído de 200.000 caracteres— y lo convierte
   en columna con el cuerpo scrolleable. Ni el fondo, ni el borde, ni el padding, ni el
   z-index se repiten.

   Solo tokens de /tokens.css — cero hex hardcodeado.
   `.on` para "seleccionado", nunca `.sel`.
   ============================================================ */

/* ---------- el chasis, encima de .dlg ---------- */

.dlg.tr-dlg{
  width:min(680px, 100%);
  max-height:calc(100vh - 40px);
  display:flex; flex-direction:column;
  padding:var(--sp-7) 0 var(--sp-6);
}
.dlg.tr-dlg.tr-angosto{ width:min(560px, 100%); }

/* El padding lateral baja a los hijos para que la barra de scroll del cuerpo quede pegada
   al borde de la caja y no flotando adentro del texto. */
.tr-dlg > .tr-titulo,
.tr-dlg > .tr-cuerpo,
.tr-dlg > .tr-pie{ padding-left:var(--sp-7); padding-right:var(--sp-7); }

/* El selector va con .tr-dlg adelante para ganarle a `.dlg h3` de base.css, que es más
   específico que un `.tr-titulo` pelado y le devolvería su margen. */
.tr-dlg > .tr-titulo{
  display:flex; align-items:baseline; gap:var(--sp-3);
  margin:0 0 var(--sp-5); font-size:var(--fs-sm); text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-2);
}
.tr-titulo .tr-volver{
  background:none; border:0; padding:0; color:var(--ink-3);
  font-size:var(--fs-xs); text-transform:none; letter-spacing:0; text-decoration:underline;
}
.tr-titulo .tr-volver:hover{ color:var(--ink-2); }

.tr-cuerpo{ overflow-y:auto; flex:1; min-height:0; }

/* El pie es `.dlg-acciones` de base.css —de ahí salen el flex, el gap y el margin-top— más
   lo único propio: queda fuera del área que scrollea, así que necesita su separación. */
.tr-pie{
  flex-wrap:wrap; gap:var(--sp-4);
  padding-top:var(--sp-5); border-top:1px solid var(--line-soft);
}
.tr-pie .tr-secundario{
  background:none; border:0; padding:0; color:var(--turquesa-ink);
  font-size:var(--fs-sm); text-decoration:underline; text-align:left;
}
.tr-pie .tr-secundario:hover{ filter:brightness(1.15); }

.tr-cerrar{ background:none; border:0; color:var(--ink-3); padding:0 var(--sp-1); line-height:1; }
.tr-cerrar:hover{ color:var(--ink); border-color:transparent; }

/* ---------- el chooser: los dos caminos ---------- */

.tr-intro{ font-size:var(--fs-md); color:var(--ink-2); margin:0 0 var(--sp-5); line-height:var(--lh-base); }

.tr-caminos{ display:flex; flex-direction:column; gap:var(--sp-4); }

.tr-camino{
  display:block; width:100%; text-align:left;
  background:var(--s2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-5) var(--sp-6);
}
.tr-camino:hover{ background:var(--s3); }
/* Todo adentro del botón son <span> con display:block y no <h4>/<p>: el modelo de contenido
   de <button> es phrasing content, así que un <p> ahí es HTML inválido aunque se vea igual. */
.tr-camino-tit{
  display:block; margin-bottom:var(--sp-2); font-size:var(--fs-base); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
}
.tr-camino-desc{
  display:block; margin-bottom:var(--sp-4);
  font-size:var(--fs-md); color:var(--ink-2); line-height:var(--lh-base);
}
.tr-camino-pie{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.tr-camino-pie .tr-cuanto{ font-size:var(--fs-xs); color:var(--ink-3); }
.tr-camino-pie .tr-falso-btn{
  margin-left:auto; border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-5);
  font-size:var(--fs-sm); font-weight:600;
}

.tr-camino.ya{ border-color:var(--turquesa-line); }
.tr-camino.ya .tr-camino-tit{ color:var(--turquesa-ink); }
.tr-camino.ya .tr-falso-btn{ background:var(--turquesa-dim); color:var(--turquesa-ink); border:1px solid var(--turquesa-line); }
.tr-camino.ya:hover{ border-color:var(--turquesa); }

.tr-camino.hay{ border-color:rgba(232,180,74,.35); }
.tr-camino.hay .tr-camino-tit{ color:var(--ambar-ink); }
.tr-camino.hay .tr-falso-btn{ background:var(--ambar-dim); color:var(--ambar-ink); border:1px solid rgba(232,180,74,.35); }
.tr-camino.hay:hover{ border-color:var(--ambar); }

/* ---------- drop zone ---------- */

.tr-drop{
  border:1px dashed var(--line); border-radius:var(--r-md);
  padding:var(--sp-8) var(--sp-6); text-align:center; cursor:pointer;
  background:var(--s2); transition:border-color .12s ease, background .12s ease;
}
.tr-drop:hover{ border-color:var(--ink-3); }
.tr-drop.over{ border-color:var(--turquesa); background:var(--turquesa-dim); }
.tr-drop.tr-apagado,
.tr-drop.tr-apagado:hover{
  cursor:not-allowed; opacity:.55; border-style:solid; border-color:var(--line);
  background:var(--s1);
}
@media (prefers-reduced-motion: reduce){ .tr-drop{ transition:none; } }
.tr-drop-tit{ font-size:var(--fs-base); color:var(--ink); }
.tr-drop-sub{ font-size:var(--fs-xs); color:var(--ink-3); margin-top:var(--sp-2); line-height:1.4; }
.tr-file{ display:none; }

/* ---------- avisos del parser (los que devuelve el server) ----------
   Van en pantalla y no en un title ni en un console.log: un parser que pierde una tabla en
   silencio se descubre tres pasos después, con la pieza ya publicada. */
.tr-avisos{
  margin:var(--sp-5) 0; padding:var(--sp-4) var(--sp-5);
  border:1px solid rgba(232,180,74,.35); border-radius:var(--r-sm);
  background:var(--ambar-dim);
}
.tr-avisos h5{
  margin:0 0 var(--sp-2); font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.04em; color:var(--ambar-ink);
}
.tr-avisos ul{ margin:0; padding-left:var(--sp-7); }
.tr-avisos li{ font-size:var(--fs-sm); color:var(--ink-2); line-height:var(--lh-base); margin-bottom:3px; }

/* ---------- el texto extraído ---------- */

.tr-meta{ font-size:var(--fs-xs); color:var(--ink-3); margin-bottom:var(--sp-3); }
.tr-texto{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--s2);
  padding:var(--sp-4) var(--sp-5);
}
.tr-texto pre{
  margin:0; font:var(--fs-sm)/1.55 var(--f-mono); color:var(--ink-2);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.tr-texto .tr-asomo pre{ max-height:132px; overflow:hidden; }
.tr-texto details{ margin-top:var(--sp-3); }
.tr-texto summary{ cursor:pointer; font-size:var(--fs-sm); color:var(--turquesa-ink); }
.tr-texto details pre{ margin-top:var(--sp-3); max-height:300px; overflow:auto; }

/* ---------- la promesa ----------
   Turquesa y no gris: es lo que hace que decir "sí" no cueste nada. */
.tr-promesa{
  margin:var(--sp-5) 0 0; padding:var(--sp-4) var(--sp-5);
  border-left:2px solid var(--turquesa); background:var(--turquesa-dim);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--fs-sm); color:var(--ink-2); line-height:var(--lh-base);
}

/* ---------- contador vivo de cupos ----------
   Dos números y no uno: el sexto video se rechaza yendo 6 de 10 fuentes, y un solo número
   no puede explicar por qué. */
.tr-contador{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  font:var(--fs-sm)/1.3 var(--f-mono); color:var(--ink-2);
  margin-bottom:var(--sp-3);
}
.tr-contador .tr-sep{ color:var(--ink-3); }
.tr-contador .cerca{ color:var(--ambar-ink); }
.tr-contador .lleno{ color:var(--rojo-ink); }
.tr-motivo-cupo{ font-size:var(--fs-xs); color:var(--ambar-ink); margin:0 0 var(--sp-4); line-height:1.4; }

/* ---------- las otras dos entradas del dossier ---------- */

.tr-otras{ display:flex; gap:var(--sp-3); margin-top:var(--sp-4); flex-wrap:wrap; }
.tr-otras button{ font-size:var(--fs-sm); }
.tr-form{
  margin-top:var(--sp-4); padding:var(--sp-5); border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--s2);
}
.tr-form[hidden]{ display:none; }
.tr-form textarea{ min-height:120px; }
/* El panel de completar una fuente que falló tiene dos botones, y el de cancelar no puede
   pesar lo mismo que el de guardar. */
.tr-completar-cancelar{ margin-left:8px; background:none; font-weight:400; }

/* ---------- la lista de fuentes ---------- */

.tr-fuentes{ list-style:none; margin:var(--sp-5) 0 0; padding:0; }
.tr-fuente{
  display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-3) 0; border-top:1px solid var(--line-soft);
}
.tr-fuente-txt{ flex:1; min-width:0; }
.tr-fuente-tit{ font-size:var(--fs-md); color:var(--ink); overflow-wrap:anywhere; }
.tr-fuente-est{ font-size:var(--fs-xs); color:var(--ink-3); margin-top:2px; }
.tr-fuente-motivo{ font-size:var(--fs-xs); color:var(--rojo-ink); margin-top:2px; line-height:1.4; }
.tr-fuente .acciones-hover button{ font-size:var(--fs-xs); padding:2px 7px; }
.tr-fuente-fija{ display:flex; gap:4px; flex:none; }
.tr-fuente .tr-fuente-fija button{ font-size:var(--fs-xs); padding:2px 7px; }

/* El punto de estado copia la semántica de .hoy-punto (gris pendiente, ámbar latiendo
   procesando, turquesa listo, rojo fallo) pero no puede reusar la clase: las cuatro
   variantes de color de .hoy-punto están escritas como `.hoy-item[data-estado=…]`, dentro
   del <style> de index.html y con los nombres de estado de las corridas ("corriendo",
   "cortada"), que no son los de una fuente. Lo que se reusa es el @keyframes cc-latido de
   panel-crear.css, que ya carga el index. */
.tr-punto{
  display:inline-block; width:7px; height:7px; border-radius:50%; flex:none;
  margin-top:6px; background:var(--ink-3);
}
.tr-fuente[data-estado="procesando"] .tr-punto{ background:var(--ambar); animation:cc-latido 1.1s ease-in-out infinite; }
.tr-fuente[data-estado="subiendo"] .tr-punto{ background:var(--ambar); animation:cc-latido 1.1s ease-in-out infinite; }
.tr-fuente[data-estado="listo"] .tr-punto{ background:var(--turquesa); }
.tr-fuente[data-estado="fallo"] .tr-punto{ background:var(--rojo); }

/* ---------- el ÚNICO porcentaje real: los bytes que suben ----------
   El servidor no sabe cuánto falta para transcribir un video, así que ahí va punto + tiempo
   transcurrido. Esto sí se mide: es el evento `progress` del XHR. */
.tr-barra{
  height:3px; border-radius:2px; background:var(--s3); overflow:hidden;
  margin-top:var(--sp-2);
}
.tr-barra span{ display:block; height:100%; background:var(--turquesa); transition:width .15s linear; }
@media (prefers-reduced-motion: reduce){ .tr-barra span{ transition:none; } }

/* ---------- la espera ---------- */

.tr-espera{
  margin:var(--sp-5) 0 0; padding:var(--sp-4) var(--sp-5);
  border-left:2px solid var(--line); background:var(--s2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--fs-sm); color:var(--ink-2); line-height:var(--lh-base);
}
.tr-espera strong{ color:var(--ink); font-weight:600; }

.tr-ok{
  font-size:var(--fs-md); color:var(--ink); line-height:var(--lh-base);
  margin:0 0 var(--sp-4);
}
.tr-ok .tr-slug{ font-family:var(--f-mono); color:var(--turquesa-ink); }

.tr-cargando{ font-size:var(--fs-sm); color:var(--ink-3); }