/* ============================================================
   VISTA · Ideas (banco de temas)

   Ideas tiene UN SOLO trabajo: decidir qué se graba después. Todo lo que agrega este
   sprint es o una ENTRADA (la barra de alta, el pegado) o MANTENIMIENTO (la papelera), y
   ninguna de las dos puede ocupar el lugar del triaje. Por eso hay una sola barra de
   entrada arriba, un solo lugar de triaje en el medio, y el mantenimiento aparece recién
   cuando se lo pide (la línea del pie, que solo existe si hay algo en la papelera).

   DE DÓNDE SALE ESTE ARCHIVO
   Las reglas de `.tema-row`, `.badge-idea`, `.badge-tendencia` y `.badge-slug` estaban
   inline en el <style> de index.html (el bloque "ideas (temas)"). Se mudan acá con los
   mismos valores; lo único que cambia es `.tema-acciones`, que era una copia a mano de
   `.acciones-hover` y ahora usa la de base.css.

   LO QUE ESTE ARCHIVO NO DEFINE, A PROPÓSITO
     · .dlg / .dlg-fondo, .menu / .menu-pop, .acciones-hover, .aviso-deshacer → base.css.
       Este sprint los estrena; escribir una variante nueva sería tener dos.
     · .seg → sigue en index.html: la comparte la barra de sección (`.sec-barra .seg`).
       El estado activo se pinta con `.on`, que base.css ya declara como alias de `.active`.
     · .badge (la píldora base) y .empty → index.html / base.css. Acá solo van las
       variantes de color propias de Ideas.
     · .hoy-punto → index.html. Se reusa la CLASE (el círculo gris de 7px) y acá abajo se
       le agregan los estados de una fuente de dossier, con la MISMA semántica de color que
       ya tiene en Hoy: gris pendiente, ámbar latiendo procesando, turquesa listo, rojo
       fallo. El @keyframes cc-latido vive en panel-crear.css, que el index ya carga.
   ============================================================ */

/* ---------- 1 · la barra de entrada ----------
   Una sola, y con un solo campo. El ángulo se fue de acá a la edición inline de la fila:
   antes se podía escribir solo al crear y nunca después, así que una idea que entraba por
   el pipeline o por un pegado no tenía dónde ganar contexto nunca más. */
.id-alta-row{ display:grid; grid-template-columns: 1fr auto auto; gap:var(--sp-3); align-items:start; }
/* «Cargar material en lote…» (lo pone index.html) va en la tercera columna, chico. */
.id-alta-row #id-traer{ background:none; color:var(--ink-2); }
.id-alta-row textarea{
  width:100%; min-height:38px; max-height:40vh; resize:vertical; font:inherit;
}
.id-alta-row button{ align-self:start; white-space:nowrap; }

/* ---------- 2 · avisos que no se esconden ----------
   El `aviso` de /api/temas significa que falta correr la migración: la lista que se ve
   salió de una lectura degradada. Taparlo haría que el equipo lea una lista incompleta
   creyendo que es todo lo que hay. */
.id-aviso{
  background:var(--ambar-dim); border:1px solid var(--ambar); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-5); margin-bottom:var(--sp-4);
  font-size:var(--fs-sm); color:var(--ink);
}
.id-aviso[hidden]{ display:none; }
.id-aviso + .id-aviso{ margin-top:calc(var(--sp-4) * -1 + var(--sp-2)); }

/* El error de red NO vacía la lista: se suma arriba y lo de abajo sigue siendo lo último
   que se trajo. Vaciar diría "no hay ideas", que es mentira sobre el estado. */
.id-error-red{
  background:rgba(232,48,42,.10); border:1px solid var(--rojo); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-5); margin-bottom:var(--sp-4);
  font-size:var(--fs-sm); color:var(--ink); display:flex; gap:var(--sp-4); align-items:center;
  flex-wrap:wrap;
}
.id-error-red[hidden]{ display:none; }
.id-error-red button{ font-size:var(--fs-xs); padding:var(--sp-1) var(--sp-3); flex:none; }

/* Panel de resultado del pegado / del borrado masivo. Va arriba de la lista y no como
   toast, porque tiene dos acciones que se piensan (Deshacer y Copiar) y un toast se va
   solo mientras las estás leyendo. */
.id-resultado{
  background:var(--turquesa-dim); border:1px solid var(--turquesa-line);
  border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-5); margin-bottom:var(--sp-4);
  font-size:var(--fs-sm); color:var(--ink);
  display:flex; gap:var(--sp-4); align-items:center; flex-wrap:wrap;
}
.id-resultado[hidden]{ display:none; }
.id-resultado .id-res-texto{ flex:1; min-width:220px; }
.id-resultado button{ font-size:var(--fs-xs); padding:var(--sp-1) var(--sp-3); flex:none; }

/* ---------- 3 · barra de triaje: el .seg y el buscador ----------
   Los dos en la misma línea: el .seg dice en qué grupo estoy, el buscador acota adentro
   del grupo. En modo selección esta barra desaparece entera y la reemplaza .id-selbar. */
.id-barra{
  display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-4); flex-wrap:wrap;
}
.id-barra[hidden]{ display:none; }
/* El .seg trae su propio margin-bottom de index.html; acá lo lleva la barra. */
.id-barra .seg{ margin-bottom:0; }
.id-buscar-caja{ display:flex; align-items:center; gap:var(--sp-2); flex:1; min-width:200px; }
#id-buscar{ flex:1; min-width:0; padding:var(--sp-2) var(--sp-4); font-size:var(--fs-sm); }
/* La × es nuestra y aparece sola cuando hay texto: la nativa de type=search se apaga para
   no tener dos cruces distintas una al lado de la otra. Mismo criterio que #piezas-buscar. */
#id-buscar::-webkit-search-cancel-button{ display:none; }
.id-limpiar{
  flex:none; background:none; color:var(--ink-2);
  padding:var(--sp-1) var(--sp-3); font-size:var(--fs-md); line-height:1.2;
}
.id-limpiar:hover{ color:var(--ink); }
.id-limpiar[hidden]{ display:none; }

/* ---------- 4 · la barra de selección ----------
   REEMPLAZA al .seg, no se suma. Por eso el modo selección es MENOS denso que el normal:
   la fila baja a un control (el checkbox), las acciones de hover se apagan y el eje de
   estado ni está en pantalla — que es lo que hace física la regla de "cambiar de grupo
   suelta la selección". */
.id-selbar{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  background:var(--s2); border:1px solid var(--turquesa-line); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-5); margin-bottom:var(--sp-4);
  font-size:var(--fs-sm); color:var(--ink);
}
.id-selbar[hidden]{ display:none; }
.id-selbar .id-sel-conteo{ font-weight:600; }
/* El criterio, cuando la selección pasó al nivel 2. Nunca hay un número sin su criterio. */
.id-selbar .id-sel-criterio{ color:var(--ink-2); }
.id-selbar button{ font-size:var(--fs-xs); padding:var(--sp-1) var(--sp-3); }
.id-selbar .id-sel-nivel2{
  background:none; border:0; color:var(--turquesa-ink); text-decoration:underline;
  font-weight:600; padding:var(--sp-1) 0;
}
.id-selbar .id-sel-nivel2:hover{ border-color:transparent; }
.id-selbar .peligro{ color:var(--rojo-ink); border-color:rgba(232,48,42,.4); }

/* ---------- 5 · la fila ----------
   Los valores son los mismos que tenía inline en index.html. */
.tema-row{
  display:flex; gap:var(--sp-4); align-items:center; background:var(--s1); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-2);
}
.tema-row:focus-visible{ outline:2px solid var(--turquesa); outline-offset:2px; }
/* La barra de la izquierda es el mismo recurso para las dos cosas y por eso se lee igual:
   turquesa = ya decidida, ámbar = tiene material colgando. */
.tema-row.elegida{ box-shadow: inset 3px 0 0 var(--turquesa); }
.tema-row.con-dossier{ box-shadow: inset 3px 0 0 var(--ambar); }
.tema-row.elegida.con-dossier{ box-shadow: inset 3px 0 0 var(--turquesa), inset 6px 0 0 -3px var(--ambar); }
.tema-row.marcada{ border-color:var(--turquesa); background:var(--s2); }
.tema-row .tema-info{ flex:1; min-width:0; }
.tema-row .tema-titulo{ font-size:15.5px; }
.tema-row .tema-meta{
  font-size:var(--fs-xs); color:var(--ink-2); margin-top:2px; font-family: var(--f-mono);
  display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap;
}
.tema-row .acciones-hover button{ font-size:var(--fs-xs); padding:var(--sp-1) var(--sp-3); }
/* ---------- la fila liviana (Bloque 2A) ----------
   Cerrada: título + un estado + una acción. Abierta (.abierta): el ángulo, la meta y las
   secundarias. */
.tema-row{ cursor:pointer; }
.tema-row.abierta{ align-items:flex-start; border-color:var(--ink-3); }
.tema-row .tema-estado{ flex:none; font-size:11.5px; color:var(--ink-3); white-space:nowrap; }
.tema-row .tema-estado[data-estado="leido"]{ color:var(--turquesa-ink); }
.tema-row .tema-estado[data-estado="leyendo"]{ color:var(--ambar-ink); }
.tema-row .tema-estado[data-estado="fallo"]{ color:var(--rojo-2); }
.tema-row .tema-estado[data-estado="producida"]{ color:var(--turquesa-ink); }
/* La única acción de la fila se ve siempre (el prototipo la muestra): es UNA por fila, no
   hay ruido que esconder detrás del mouse, y sin mouse (390) no había forma de verla. */
.tema-row .acciones-hover{ flex:none; opacity:1; }
.id-barra .seg[hidden]{ display:none; }
.tema-det{ margin-top:var(--sp-2); font-size:12.5px; color:var(--ink-2); line-height:1.45; }
.tema-det .tema-angulo.vacio{ color:var(--ink-3); }
.tema-det .tema-meta{ margin-top:var(--sp-2); }
.tema-det .tema-acts{ margin-top:var(--sp-3); display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }
.tema-det .tema-acts button{ font-size:var(--fs-xs); padding:var(--sp-1) var(--sp-3); }
.id-producidas{ margin:var(--sp-6) 0 0; }
.id-producidas summary{ cursor:pointer; color:var(--ink-3); font-size:var(--fs-sm); margin:0 0 var(--sp-2) var(--sp-2); }
.id-producidas .tema-row .tema-titulo{ color:var(--ink-2); }
.id-aviso-829{ display:block; }
.id-aviso-829 b{ color:var(--ink); }
.id-aviso-829 .id-aviso-829-nota{ margin-top:var(--sp-2); font-size:var(--fs-sm); color:var(--ink-3); }
@media (max-width: 600px){
  .tema-row .tema-estado{ display:none; }
}
/* El título es el segundo camino a la edición (el primero es Editar, en el menú). Se
   marca como clickeable sin gritar: un subrayado punteado al hover. */
.tema-row .tema-titulo-btn{
  background:none; border:0; padding:0; text-align:left; color:inherit; font:inherit;
  border-radius:var(--r-xs);
}
.tema-row .tema-titulo-btn:hover{ border-color:transparent; text-decoration:underline dotted; }
.id-check{ flex:none; width:16px; height:16px; accent-color:var(--turquesa); }

.badge-tendencia{ background:var(--turquesa-dim); color:var(--turquesa-ink); }
.badge-idea{ background:var(--s3); color:var(--ink-2); }
/* El tercer valor de `origen`. Ámbar, que en este repo es "hay trabajo en curso acá". */
.badge-dossier{ background:var(--ambar-dim); color:var(--ambar-ink); }
.badge-slug{ background:var(--turquesa-dim); color:var(--turquesa-ink); font-family:var(--f-mono); }

/* ---------- 6 · edición inline ----------
   Dos campos, tema y ángulo, adentro de la misma fila. No abre un diálogo: editar el
   título de una idea mientras triás cien no puede costar una ventana. */
.id-editar{ display:flex; flex-direction:column; gap:var(--sp-2); width:100%; }
.id-editar textarea, .id-editar input{ width:100%; font:inherit; }
.id-editar textarea{ min-height:52px; resize:vertical; font-size:15.5px; }

/* El textarea del diálogo de "pegar el texto". Alto porque lo que entra acá es una
   transcripción entera, no un renglón. */
.id-dlg-textarea{
  width:100%; box-sizing:border-box; margin-top:8px;
  min-height:220px; resize:vertical;
  font:inherit; font-size:14px; line-height:1.5;
}
.id-editar input{ font-size:var(--fs-md); }
.id-editar-pie{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  font-size:var(--fs-xs); color:var(--ink-3);
}
.id-editar-pie button{ font-size:var(--fs-xs); padding:var(--sp-1) var(--sp-3); }
.id-contador{ font-family:var(--f-mono); }
.id-contador.pasado{ color:var(--rojo-ink); }
/* La fila que no pudo guardar se queda abierta y en rojo CON el motivo: cerrarla sería
   tirar lo que la persona escribió para no tener que explicar por qué no entró. */
.id-editar-error{ color:var(--rojo-ink); font-size:var(--fs-xs); line-height:var(--lh-tight); }
.id-editar-aviso{ color:var(--ambar-ink); font-size:var(--fs-xs); line-height:var(--lh-tight); }
.tema-row.editando{ border-color:var(--turquesa); align-items:stretch; }
.tema-row.con-error{ border-color:var(--rojo); }

/* ---------- 7 · dossier: la fila sigue siendo UNA línea ----------
   Los sub-items van plegados. Una idea con material no puede ocupar seis renglones en una
   lista donde el trabajo es leer títulos y decidir. */
.id-dossier-toggle{
  background:none; border:0; padding:0; color:var(--ambar-ink); font:inherit; font-size:var(--fs-xs);
  font-family:var(--f-mono); text-decoration:underline dotted;
}
.id-dossier-toggle:hover{ border-color:transparent; color:var(--ink); }
.id-fuentes{
  margin:calc(var(--sp-2) * -1) 0 var(--sp-2); padding:var(--sp-4) var(--sp-5);
  background:var(--s1); border:1px solid var(--line); border-top:0;
  border-radius:0 0 var(--r-md) var(--r-md);
}
.id-fuentes[hidden]{ display:none; }
.id-fuente{
  display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-2) 0;
  border-bottom:1px solid var(--line-soft);
}
.id-fuente:last-of-type{ border-bottom:0; }
.id-fuente .hoy-punto{ margin-top:6px; }

/* El estado del video de la idea, en la fila. Mismo latido y colores que las fuentes. */
.id-material{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font:400 var(--fs-xs)/1 var(--f-mono); color:var(--ink-2); white-space:nowrap;
}
.id-material[data-estado="leyendo"] .hoy-punto{ background:var(--ambar); animation:cc-latido 1.1s ease-in-out infinite; }
.id-material[data-estado="leido"]{ color:var(--turquesa-ink); }
.id-material[data-estado="fallo"]{ color:var(--rojo-ink); }
.id-material button{ font-size:var(--fs-xs); padding:2px var(--sp-3); }
.id-fuente-cuerpo{ flex:1; min-width:0; }
.id-fuente-titulo{ font-size:var(--fs-md); word-break:break-word; }
.id-fuente-meta{ font-size:var(--fs-xs); color:var(--ink-2); font-family:var(--f-mono); }
/* El motivo del fallo va DEBAJO, en texto. Un title no existe para el teclado y no se
   puede copiar — y este texto es justo el que alguien va a querer pegar en un mensaje. */
.id-fuente-motivo{ font-size:var(--fs-xs); color:var(--rojo-ink); line-height:var(--lh-tight); margin-top:2px; }
.id-fuente-avisos{ font-size:var(--fs-xs); color:var(--ambar-ink); line-height:var(--lh-tight); margin-top:2px; }
.id-fuente-acciones{ display:flex; gap:var(--sp-2); flex:none; }
.id-fuente-acciones button{ font-size:var(--fs-xs); padding:var(--sp-1) var(--sp-3); }

/* La misma semántica de color que .hoy-punto tiene en Hoy, aplicada al estado de una
   fuente. Se hereda el círculo gris de la clase base y solo se pisa el color. */
.id-fuente[data-estado="procesando"] .hoy-punto{ background:var(--ambar); animation:cc-latido 1.1s ease-in-out infinite; }
.id-fuente[data-estado="listo"] .hoy-punto{ background:var(--turquesa); }
.id-fuente[data-estado="fallo"] .hoy-punto{ background:var(--rojo); }
/* Una fuente estancada se muestra como cortada, no como "todavía procesando": el latido
   invita a esperar algo que no va a pasar. Mismo ámbar quieto que `cortada` en Hoy. */
.id-fuente[data-estancada="1"] .hoy-punto{ background:var(--ambar); animation:none; }

.id-fuentes-pie{
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--line-soft);
  font-size:var(--fs-xs); color:var(--ink-2); font-family:var(--f-mono);
}
.id-fuentes-pie button{ font-size:var(--fs-xs); padding:var(--sp-1) var(--sp-3); }
/* El motivo por el que Producir está apagado, DEBAJO del botón y no en un title. Es el
   patrón del chip de LinkedIn de publicar.js. */
.id-producir-motivo{
  margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--ink-2);
  line-height:var(--lh-tight); font-family:var(--f-ui);
}
/* El mismo motivo, pero al lado del botón de la fila: ahí `.acciones-hover` es un flex en
   fila, así que el margen de arriba lo desalinearía. Se acota el ancho para que un motivo
   largo no empuje la fila entera. */
.acciones-hover > .id-producir-motivo{
  margin-top:0; align-self:center; max-width:30ch;
}

/* ---------- 8 · paginación ----------
   Aparece solo si el grupo filtrado pasa de 100. No va al hash: es una posición de scroll,
   no un lugar — un link a "la página 4 de mis pendientes" no significa nada para el que lo
   recibe, porque su página 4 es otra. */
.id-pag{
  display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-4);
  font-size:var(--fs-sm); color:var(--ink-2);
}
.id-pag[hidden]{ display:none; }
.id-pag button{ font-size:var(--fs-xs); padding:var(--sp-1) var(--sp-3); }
.id-pag .id-pag-de{ font-family:var(--f-mono); }

/* ---------- 9 · el pie de mantenimiento ----------
   La papelera NO es un cuarto grupo del .seg: los tres grupos son decisiones del triaje y
   "borrada" es mantenimiento. Como pestaña, Emma vería "Borradas (831)" todos los días,
   para siempre, por un lugar que se visita dos veces en la vida. Como línea al pie que
   solo aparece si hay algo, cuesta un renglón y desaparece cuando la papelera se vacía. */
.id-pie{ margin:var(--sp-7) 0 0; font-size:var(--fs-sm); color:var(--ink-3); }
.id-pie[hidden]{ display:none; }
.id-pie button{
  background:none; border:0; padding:0; color:var(--turquesa-ink); font:inherit;
  text-decoration:underline;
}
.id-pie button:hover{ border-color:transparent; }

/* La cabecera del modo papelera, donde iría el .seg. Sin .seg a propósito: adentro de la
   papelera el estado de triaje no es un eje, es un dato de cada fila ("era pendiente"). */
.id-papelera-head{
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4);
}
.id-papelera-head[hidden]{ display:none; }
.id-papelera-head h3{
  margin:0; font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2);
}

/* ---------- 10 · vacíos ----------
   Calcado de .piezas-sin-resultado: el número honesto y una salida clickeable. */
.id-sin-resultado{ padding:var(--sp-7) var(--sp-4); font-size:var(--fs-sm); }
.id-sin-resultado button{ margin-top:var(--sp-4); font-size:var(--fs-xs); }
.id-sin-resultado .id-sr-otro{ margin-top:var(--sp-2); color:var(--ink-2); }

/* ---------- 11 · atajos ----------
   Plegados al pie. Todo lo que hay acá adentro tiene su equivalente clickeable en la
   pantalla: esto es una ayuda para el que ya lo hace todos los días, no la única puerta. */
.id-atajos{ margin-top:var(--sp-5); font-size:var(--fs-xs); color:var(--ink-3); }
.id-atajos[hidden]{ display:none; }
.id-atajos summary{ cursor:pointer; color:var(--ink-2); }
.id-atajos ul{ margin:var(--sp-3) 0 0; padding-left:var(--sp-7); line-height:1.7; }
.id-atajos kbd{
  font-family:var(--f-mono); font-size:var(--fs-micro); background:var(--s3);
  border:1px solid var(--line); border-radius:var(--r-xs); padding:1px 5px;
}

/* ---------- 12 · el diálogo del pegado y del borrado grande ----------
   Va adentro de .dlg (base.css), que trae la caja, el fondo y el ancho. Acá solo lo que es
   propio de este contenido. El ancho se pisa: 400px alcanza para un confirm y no para una
   muestra de títulos. */
.id-dlg{ width:min(560px, 100%); }
/* La cabeza es un conteo de cuatro números y no una lista. Se lee en dos segundos y
   contesta la única pregunta que importa antes de escribir: "esto son 850, ¿en serio?". */
.id-conteo{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-2);
  margin-bottom:var(--sp-5);
}
.id-conteo div{
  background:var(--s2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-3); text-align:center;
}
.id-conteo .n{ display:block; font-size:var(--fs-xl); font-family:var(--f-mono); color:var(--ink); }
.id-conteo .r{ display:block; font-size:var(--fs-micro); color:var(--ink-2); text-transform:uppercase; letter-spacing:.03em; }
.id-conteo .bien .n{ color:var(--turquesa-ink); }
.id-conteo .mal .n{ color:var(--ambar-ink); }
.id-conteo .cero .n{ color:var(--ink-3); }

/* Las listas salen plegadas a 3 primeras + 2 últimas: ver el principio y el final es lo que
   te dice si el pegado se cortó mal. El medio de una lista de 800 no aporta nada. */
.id-muestra{ margin:0 0 var(--sp-5); padding:0; list-style:none; font-size:var(--fs-sm); }
.id-muestra li{
  padding:var(--sp-1) 0; color:var(--ink-2); border-bottom:1px solid var(--line-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.id-muestra li:last-child{ border-bottom:0; }
.id-muestra li .n{ color:var(--ink-3); font-family:var(--f-mono); margin-right:var(--sp-2); }
.id-muestra li.corte{ color:var(--ink-3); font-family:var(--f-mono); white-space:normal; }
.id-muestra li .motivo{ color:var(--ink-3); }
.id-grupo-titulo{
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2);
  margin:0 0 var(--sp-2);
}
.id-dlg-scroll{ max-height:46vh; overflow:auto; margin-bottom:var(--sp-4); }
/* La oferta del techo de 50 NO es un error: es "esto entra, esto se queda". Por eso va en
   ámbar y no en rojo, y por eso el botón dice qué se lleva. */
.id-oferta{
  background:var(--ambar-dim); border:1px solid var(--ambar); border-radius:var(--r-sm);
  padding:var(--sp-4); margin-bottom:var(--sp-5); font-size:var(--fs-sm); line-height:var(--lh-base);
}
.id-oferta p{ margin:0 0 var(--sp-3); }
.id-oferta p:last-child{ margin-bottom:0; }
.id-dlg-error{ color:var(--rojo-ink); font-size:var(--fs-sm); margin:0 0 var(--sp-4); }
.dlg-acciones .spacer{ flex:1; }

@media (max-width: 720px){
  .id-conteo{ grid-template-columns:repeat(2, 1fr); }
  .id-barra{ align-items:stretch; }
}