:root {
	--fondo: 			#FFFFDDFF;
	--hoja: 			#FFFFFFAA;
	--mensajes: 		#DDFFDDDD;
	--titulo: 			#000000FF;
	--letra: 			#000000FF;
	--linea: 			#EAEAEAFF;
	--resaltado: 		#FF8888FF;
	--archivo_fondo:	none;
	--archivo_mensajes:	none;
	--archivo_hoja:		none;
}

/* ============================================
   BASE
   ============================================ */

html, body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	height: 100%;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
}

html {
	background-color: var(--fondo);
	background-image: var(--archivo_fondo);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--titulo);
}

h1 {
	margin-top: 5px;
	margin-bottom: 10px;
}

h2 {
	margin-top: 5px;
	margin-bottom: 5px;
}

p {
	margin: 0px;
	text-align: justify;
}

input {
	background-color: var(--hoja);
	color: var(--letra);
	border-radius: 4px;
}

input:focus {
	outline: 2px dotted var(--resaltado);
	border-radius: 6px;
}

button {
	background-color: var(--fondo);
	color: var(--letra);	
	border: 2px var(--linea) solid;	
	border-radius: 18px;
	box-shadow: 2px 2px var(--letra);
}

button:hover {
	background-color: var(--hoja);
}

button:active {
	transform: translateY(1px);
}

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */

.todo {
	position: relative;
	overflow: auto;
	width: 100%;
	height: 100%;
	border: 2px solid transparent;
	border-radius: 6px;
	box-sizing: border-box;
	display: none;
}

.todo.miron {
	display: block;
}

.footer {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 10%;
	height: 10px;
	z-index: 900;
}

/* ============================================
   HERRAMIENTAS (TOOLBAR)
   ============================================ */

.herramientas {
	position: fixed;
	left: auto;
	right: 0;
	top: 16px;
	z-index: 1000;
	margin: 2px;
	display: block;
}

.herramientas.miron {
	display: block;
}

.generales a span {
	display: none;
}

.seccion_ideas, .seccion_sesion {
	display: none;
}

.herramientas .seccion_sesion {
	display: block;
}
/* Crear idea y afines solo en modo edición (en vista/preview no se crean ideas). */
body.modo_edicion .herramientas.opinador .seccion_ideas {
	display: block;
}

.botoncito {
	display: block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	margin-top: 10px;
}

.botoncito:hover {
	margin-left: 5px;
	transition: 0.3s;
}

.ideaTexto {
	background-image: url("../images/limbo/subirimagen.gif");
}

.configurarIdea {
	background-image: url("../images/limbo/cambiarpintar.gif");
	display: none;
}

/* Solo mostrar configurarIdea para autores */
.herramientas.autor .configurarIdea,
.herramientas.curador .configurarIdea {
	display: block;
}

/* Botón volver al padre — abajo a la derecha, fijo. */
.volverPadre {
	background-image: url("../images/limbo/volver_quieto.gif");
	display: none;
	position: fixed;
	right: 16px;
	bottom: 16px;
	margin-top: 0;
	z-index: 1001;
}

.volverPadre:hover {
	background-image: url("../images/limbo/volver.gif");
}

/* Mostrar volver cuando hay padre */
.herramientas.conPadre .volverPadre {
	display: block;
}

/* Sesión: el mismo botón abre el panel. Sin sesión es "iniciar sesión"; con
   sesión pasa a ser el menú de usuario (editar cuenta / cerrar sesión), así que
   cambia al ícono de usuario. El botón "cerrar sesión" vive dentro del panel. */
.iniciarSesion {
	background-image: url("../images/limbo/iniciar.gif");
	display: block;
}

.herramientas.loggeado .iniciarSesion {
	background-image: url("../images/limbo/cara_grande.gif");
}

/* Botones del menú de usuario (guardar / cerrar): texto chico, a la derecha,
   con su icono. */
.botones_sesion {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}
/* Más específico que `#ventana_iniciarSesion button` (que los pone xx-large y
   clear:left, apilándolos). Texto normal y en fila. */
#ventana_iniciarSesion .boton_sesion,
.boton_sesion {
	font-size: 0.95rem;
	padding: 4px 10px;
	margin: 2px 0;
	clear: none;
	float: none;
}
.boton_sesion .icono_sesion {
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin-right: 3px;
}

/* ============================================
   EDITOR
   ============================================ */

.editor {
	position: fixed;
	left: 2px;
	top: 16px;
	width: 36px;
	display: none;
	transition: 0.3s;
	z-index: 1001;
}

.editor.opinador {
	display: block;
}

/* Acciones de la idea seleccionada (eliminar, fijar/soltar): columna izquierda,
   arriba del editor de texto. Sin idea seleccionada el contenedor queda vacío y
   no ocupa lugar; con selección, el editor baja para dejarle la fila. */
.seccion_idea {
	position: fixed;
	left: 2px;
	top: 16px;
	z-index: 1002;
}
.seccion_idea:empty {
	display: none;
}
body.hay_seleccion .editor {
	top: 56px;
}
.acciones_idea {
	display: flex;
	gap: 4px;
}
.acc_idea {
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 2px 0;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Los iconos vienen de las mismas clases que usaba la tarjeta; acá van centrados
   dentro del botón, y `mandaralfondo` (oculta por defecto) tiene que mostrarse. */
.acciones_idea .ico_acc {
	display: inline-block;
	width: 20px;
	height: 16px;
	background-position: center;
	margin: 0;
}

/* Botones del editor de texto: más grandes y con el icono más visible. */
.editor button {
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 2px 0;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.editor button i {
	font-size: 1rem;
	line-height: 1;
}

[contenteditable="true"] {
	outline: 0px solid transparent;
	transition: 0.3s;
}

[contenteditable="true"]:focus {
	outline: 3px dotted var(--resaltado);
	border-radius: 6px;
	transition: 0.3s;
}

/* Texto: solo el que se puede editar muestra afordancia de escritura. El texto
   sin permiso (o en modo vista) se lee como contenido, sin cursor de texto ni
   marco de "aquí se escribe" — antes parecía editable aunque no lo fuera. */
.idea.texto {
	cursor: default;
}
.idea.texto.editable {
	cursor: text;
}
body.modo_edicion .idea.texto.editable {
	outline: 1px dashed rgba(0, 0, 0, 0.18);
	outline-offset: 2px;
	border-radius: 6px;
	min-width: 24px;
	min-height: 1.2em;
} 

/* ============================================
   HOJA Y CONTENEDORES DE IDEAS
   ============================================ */

#hoja {
	max-width: 800px;
	min-width: 300px;
	width: 60%;
	margin-left: 34px;
	margin-top: 5px;
	background-color: var(--hoja);
	background-image: var(--archivo_hoja);
	border: 2px solid transparent;
	border-radius: 6px;
}

#hoja:hover {
	border: 2px solid var(--linea);
}

.ideas_principal {
	margin-bottom: -10px;
}

.ideas_pegadas, .ideas_fondo {
	padding: 6px;
}

.ideas_voladoras, .ideas_fondo {
	position: absolute;
	top: 0px; 
	left: 46px;
	width: auto;
	min-width: 100%;
	pointer-events: none;
}

/* Permitir interacción con los contenedores hijos */
.ideas_voladoras > *, .ideas_fondo > * {
	pointer-events: auto;
}

.ideas_quetodavianoseven {
	display: none;
}

/* ============================================
   CONTENEDOR DE IDEAS (CONSOLIDADO)
   ============================================ */

.contenedor {
	position: relative; /* Para posicionamiento absoluto de hijos */
	word-wrap: break-word;
	transform-origin: top left;
	margin: 4px 2px;
	padding: 2px 6px;
	color: var(--letra);
	border: 2px solid transparent;
	border-radius: 6px;
	min-width: 50px;
	box-sizing: border-box;
}

.contenedor > .bolsa {
	margin-top: 8px;
	margin-bottom: 4px;
	margin-right: 6px;
	margin-left: 6px;
}

/* Fondos según ubicación */
.ideas_voladoras .contenedor, 
.bolsa .contenedor {
	background-color: var(--mensajes);
	background-image: var(--archivo_mensajes);
}

.ideas_pegadas .contenedor {
	background-color: var(--hoja);
	background-image: var(--archivo_hoja);
}

.ideas_fondo .contenedor {
	background: none;
	background-image: none; 
}

/* Posicionamiento según ubicación */
.ideas_voladoras .contenedor, 
.ideas_fondo .contenedor {
	position: absolute;
}

/* Bordes en hover */
.ideas_pegadas .contenedor:hover,
.ideas_voladoras .contenedor:hover,
.bolsa .contenedor:hover,
input {
	border: 2px solid var(--linea);
}

.ideas_voladoras > .contenedor {
	border: 2px solid var(--linea);
	border-radius: 6px;
}

/* Clases de tamaño */
.pedazo {
	display: block;
	width: auto;
}

.pedacito {
	display: inline-block;
	position: relative;
}

.finaldeidea {
	clear: both;
}

/* Ideas principales no rotan */
.ideas_principal .contenedor {
	transform: rotate(0deg) !important;
}

/* ============================================
   DRAG & DROP STYLES
   ============================================ */

.ui-draggable-dragging {
	cursor: grabbing;
	z-index: 5000;
	opacity: 0.95;
}

/* CORREGIDO: Quitamos max-width restrictivo durante drag */
/* Antes causaba que el elemento se achicara al tomarlo */
/*
.ideas_pegadas .ui-draggable-dragging {
	max-width: 50%; 
}
.ideas_voladoras .ui-draggable-dragging {
	max-width: 300px; 
}
*/

.idea_drop:hover, 
.ui-draggable-dragging, 
.ui-resizable-resizing {
	border: 2px solid var(--resaltado) !important;
}

/* Destino del arrastre (React): marca dónde va a quedar la idea al soltar. */
.arrastre_destino {
	outline: 3px dashed var(--resaltado);
	outline-offset: -3px;
	background-color: rgba(0, 0, 0, 0.04);
}

/* Marca de reorden (subebaja): línea sobre/bajo el hermano donde caerá la idea. */
.reorden_antes {
	box-shadow: 0 -3px 0 0 var(--resaltado);
}
.reorden_fin {
	box-shadow: 0 3px 0 0 var(--resaltado);
}

/* Media (imagen/audio/video): el contenido llena el cuerpo, sin padding. */
.contenedor.media {
	padding: 0;
}
.contenedor.media > .idea {
	margin: 0;
	line-height: 0; /* evita el hueco bajo elementos inline como <img>/<video> */
}

/* Herramientas derechas en fila, orden info · fijar · eliminar. */
.contenedor > .herramientas_idea_derecha {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 3px;
	width: auto;
	float: none;
	position: absolute;
	top: 0;
	right: 0;
	margin-top: -14px;
	margin-right: -4px;
	z-index: 6;
}
/* Info dentro de la fila: oculta salvo hover del contenedor o fijada (nocollapsed). */
.contenedor > .herramientas_idea_derecha > .info {
	visibility: hidden;
	float: none;
	margin: 0;
}
.contenedor:hover > .herramientas_idea_derecha > .info,
.herramientas_idea_derecha > .info.nocollapsed {
	visibility: visible;
}

/* Info fijada: cabecera del mensaje (autor y fecha), en flujo sobre el contenido. */
.info_idea {
	display: block;
	font-size: x-small;
	line-height: 1.3;
	color: var(--letra);
	padding: 3px 6px;
	margin-bottom: 2px;
	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}
.info_idea .nombre {
	font-weight: bold;
}
.info_idea .fechahora {
	float: right;
	margin-left: 8px;
	color: var(--resaltado);
}

/* Media sin hijos: la bolsa vacía no debe dejar hueco bajo el contenido. */
.contenedor.media > .bolsa:empty {
	margin: 0;
}

/* Composición video + texto: subtítulo sobre el video (D.4a). */
.video_wrap {
	position: relative;
	line-height: 0;
}
.subtitulo_video {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 44px; /* por encima de la barra de controles */
	margin: 0 auto;
	max-width: 92%;
	width: fit-content;
	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 4px;
	padding: 2px 8px;
	font-size: 0.9em;
	line-height: 1.25;
	pointer-events: none;
}
.subtitulo_video p {
	margin: 0;
}

/* Envuelve la animación para que el control de velocidad se ancle a la imagen
   (abajo a la izquierda de la imagen) y no al contenedor, donde caería sobre el
   reproductor de audio. */
.anim_wrap {
	position: relative;
	line-height: 0;
}

/* Control de velocidad de la animación (aparece al pasar por encima, en edición). */
.control_velocidad {
	position: absolute;
	left: 4px;
	bottom: 4px;
	z-index: 7;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	padding: 2px 5px;
	line-height: 1;
	display: none;
}
.contenedor:hover > .idea > .anim_wrap > .control_velocidad {
	display: block;
}
.control_velocidad input {
	width: 90px;
	vertical-align: middle;
	cursor: pointer;
}

/* Toggle secuencia/mezcla para audios (aparece al pasar por encima, en edición). */
.control_modo {
	position: absolute;
	left: 4px;
	bottom: 4px;
	z-index: 7;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 2px 6px;
	font-size: x-small;
	cursor: pointer;
	display: none;
}
.contenedor:hover > .idea > .control_modo {
	display: block;
}

/* ============================================
   Reproductor propio (audio/video) — iconos en images/limbo/player/.
   El loop vive en la misma barra que play/volumen.
   ============================================ */
.mp {
	position: relative;
	container-type: inline-size; /* permite consultar el ancho de la idea (queries abajo) */
}
.mp_media {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}
.mp_audio .mp_media {
	display: none; /* el <audio> sin controles no aporta visual */
}
.mp_barra {
	display: flex;
	align-items: center;
	flex-wrap: wrap; /* si la idea es angosta, los controles bajan de fila en vez de ocultarse */
	gap: 3px;
	row-gap: 3px;
	background: rgba(0, 0, 0, 0.6);
	padding: 3px 5px;
	border-radius: 4px;
	/* sobre las franjas de arrastre, para que los controles sean clicables */
	position: relative;
	z-index: 8;
}
.mp_video .mp_barra {
	border-radius: 0 0 4px 4px;
}
.mp_btn {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	cursor: pointer;
	line-height: 0;
}
.mp_btn.mp_chico {
	width: 16px;
	height: 16px;
}
.mp_btn.mp_play {
	width: 28px;
	height: 28px;
}
.mp_btn.mp_full_btn {
	width: 26px;
	height: 26px;
}
.mp_btn:hover,
.mp_btn:focus,
.mp_btn:active {
	background-color: transparent;
	filter: brightness(1.25);
}
/* Sin borde/anillo de foco en los controles del reproductor, el slider, el video
   ni el toggle editar/preview. */
.mp_btn,
.mp_btn:focus,
.mp_btn:focus-visible,
.mp_btn:active,
.mp_barra button:focus,
.mp_barra button:focus-visible,
.mp_vol:focus,
.mp_vol:focus-visible,
.mp_progreso:focus,
.mp_media:focus,
.mp_media:focus-visible,
.toggleModo,
.toggleModo:focus,
.toggleModo:focus-visible,
.toggleModo:active {
	outline: none;
	box-shadow: none;
	border: none;
}
.mp_tiempo {
	color: #fff;
	font-size: 10px;
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}
.mp_progreso {
	flex: 1 1 auto;
	min-width: 40px;
	height: 8px;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 4px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
/* Al pasar por el volumen aparece el slider. Si la idea es ANGOSTA (no cabe todo
   en una fila), la barra de tiempo cede su espacio mientras dura el hover: el
   progreso se encoge y las etiquetas de tiempo se ocultan, así los botones no
   saltan de fila. Si hay espacio, no se toca nada (el progreso se encoge solo). */
@container (max-width: 230px) {
	.mp_barra:has(.mp_vol_grupo:hover) .mp_progreso {
		min-width: 0;
	}
	.mp_barra:has(.mp_vol_grupo:hover) .mp_tiempo {
		display: none;
	}
}
.mp_progreso_relleno {
	height: 100%;
	background: #e63329;
	border-radius: 4px;
	pointer-events: none;
}
.mp_vol_grupo {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 0 0 auto;
}
.mp_vol_speaker {
	pointer-events: none; /* icono fijo de volumen (volumen.gif) */
	width: 14px;
}
.mp_vol_nivel {
	width: 14px;
	margin-left: -4px; /* pegado al icono de volumen */
}
/* El slider aparece inline al pasar por encima del grupo de volumen. */
.mp_vol {
	width: 44px;
	max-width: 44px;
	cursor: pointer;
	display: none;
}
.mp_vol_grupo:hover .mp_vol {
	display: inline-block;
}

/* Pantalla completa: video centrado, barra superpuesta abajo que se auto-oculta
   y reaparece al mover el mouse (clase mp_sin_ctrl la controla el componente). */
.mp_full {
	width: 100vw;
	height: 100vh;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mp_full .mp_media {
	width: auto;
	max-width: 100vw;
	max-height: 100vh;
	border-radius: 0;
}
.mp_full .mp_barra {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 0;
	transition: opacity 0.25s;
}
.mp_full.mp_sin_ctrl .mp_barra {
	opacity: 0;
	pointer-events: none;
}
.mp_full.mp_sin_ctrl {
	cursor: none;
}

/* Video (ventana): la barra se superpone abajo y se auto-oculta (la opacidad la
   controla el componente). El audio mantiene su barra en flujo. */
.mp_video:not(.mp_full) .mp_barra {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	transition: opacity 0.25s;
}
/* Play grande al centro cuando el video está pausado. */
.mp_play_centro {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.55);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 42%;
	cursor: pointer;
	z-index: 9;
	transition: background-color 0.2s;
}
.mp_play_centro:hover {
	background-color: rgba(0, 0, 0, 0.75);
}
/* Mantener el centrado al presionar (la regla global button:active lo pisaba y
   el botón se corría, por eso el clic no llegaba a completarse). */
.mp_play_centro:active {
	transform: translate(-50%, -50%);
}
/* En edición, mientras reproduce, el botón central de pausa aparece al pasar el
   mouse por la idea. Se controla por `.contenedor:hover` (y no por estado de
   React) porque la franja de arrastre tapa el video e impide que el pointerenter
   llegue de forma fiable. */
.mp_centro_hover {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s;
}
.contenedor:hover .mp_centro_hover {
	opacity: 1;
	pointer-events: auto;
}



/* Toggle "raíz madre" en la idea raíz (autor, en edición). */
.control_raiz {
	position: absolute;
	top: 2px;
	left: 4px;
	z-index: 7;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border-radius: 4px;
	padding: 1px 6px;
	font-size: x-small;
	cursor: pointer;
	white-space: nowrap;
	display: none;
}
.contenedor:hover > .control_raiz {
	display: inline-block;
}
.control_raiz input {
	vertical-align: middle;
	cursor: pointer;
}

/* Madre raíz sin permiso: se oculta el botón "volver al padre". */
body.raiz_madre_sin_volver .volverPadre {
	display: none !important;
}

/* Panel "configurar" (⚙) por idea: agrupa velocidad, modo, raíz madre y mover a. */
.config_idea_wrap {
	position: absolute;
	top: 2px;
	left: 4px;
	z-index: 8;
	display: none;
}
.contenedor:hover > .config_idea_wrap {
	display: block;
}
.config_idea_btn {
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 1px 5px;
	font-size: x-small;
	cursor: pointer;
	line-height: 1.4;
}
.config_idea {
	position: absolute;
	left: 0;
	top: 20px;
	min-width: 150px;
	background: #fff;
	color: #222;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.config_fila {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: x-small;
}
.config_fila input[type='range'] {
	flex: 1;
}
.config_fila_btn {
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: rgba(128, 128, 128, 0.1);
	border-radius: 4px;
	padding: 3px 6px;
	font-size: x-small;
	cursor: pointer;
	text-align: left;
	color: #222;
}

/* Config del idea actual dentro de la ventana "configurar". */
.config_idea_actual {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(128, 128, 128, 0.3);
}
.config_idea_titulo {
	font-size: x-small;
	font-weight: bold;
	opacity: 0.8;
}
.config_idea_actual .config_fila {
	flex-wrap: nowrap;
}
.config_idea_actual .config_fila > i.bi {
	width: 22px;
	text-align: center;
	opacity: 0.85;
	flex: none;
	font-size: 1.1rem;
	line-height: 1;
}
/* El input global es display:block; forzar el checkbox inline para que "raíz madre"
   quede al lado del icono. */
.config_idea_actual .config_fila input[type='checkbox'] {
	display: inline-block;
	width: 14px;
	min-width: 14px;
	height: 14px;
	margin: 0;
	flex: none;
	border-width: 1px;
	vertical-align: middle;
}
.config_idea_actual .mover_a {
	flex: 1;
}
/* Anular el `.colores label { width:22px }` del modal para las filas de esta sección. */
#ventana_configurarColores .colores .config_idea_actual .config_fila {
	width: auto;
	margin-left: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* "Mover a" (E.2): botón + lista desplegable de raíces destino (dentro del panel). */
.mover_a {
	position: relative;
	display: block;
}
.mover_a_btn {
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: rgba(128, 128, 128, 0.1);
	color: #222;
	border-radius: 4px;
	padding: 3px 6px;
	font-size: x-small;
	cursor: pointer;
	text-align: left;
}
.mover_a_lista {
	position: absolute;
	left: 0;
	top: 18px;
	min-width: 130px;
	max-height: 180px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.mover_a_lista button {
	display: block;
	width: 100%;
	text-align: left;
	border: none;
	background: none;
	padding: 4px 8px;
	cursor: pointer;
	font-size: x-small;
	color: #222;
}
.mover_a_lista button:hover {
	background: rgba(128, 128, 128, 0.15);
}
.mover_a_vacio {
	padding: 4px 8px;
	font-size: x-small;
	color: #666;
}

/* Mezcla de audios: un botón que arranca/pausa todas las pistas juntas. */
.audio_mezcla_btn {
	display: block;
	width: 100%;
	padding: 6px;
	border: none;
	border-radius: 4px;
	background: rgba(128, 128, 128, 0.25);
	color: var(--letra);
	cursor: pointer;
	font-size: 0.9em;
}

/* Voladora: franja superior (arrastrar) y franja derecha (agrandar, útil en media).
   Se muestran al pasar por encima en las voladoras propias o si se es curador. */
.mover_cabecera,
.resize_derecha {
	display: none;
	position: absolute;
	background: transparent;
}
.mover_cabecera {
	z-index: 4;
	top: 0;
	left: 0;
	right: 0;
	height: 12px;
	cursor: move;
	border-radius: 6px 6px 0 0;
}
.resize_derecha {
	z-index: 5; /* sobre la franja de arrastre, para poder agrandar por el borde */
	top: 0;
	bottom: 0;
	right: 0;
	width: 10px;
	cursor: ew-resize;
	border-radius: 0 6px 6px 0;
}

/* Video: franja superior más alta (más fácil de tomar) y franja de agrandar que
   NO llega al fondo, para no tapar la barra de tiempo/controles. */
.contenedor.media_video .mover_cabecera {
	top: 0;
	bottom: 44px; /* deja libre la barra de controles de abajo */
	height: auto;
}
.contenedor.media_video .resize_derecha {
	bottom: 44px;
}

/* Imagen: se puede arrastrar desde cualquier parte (la franja cubre toda la idea);
   la franja derecha sigue encima para poder agrandar. */
.contenedor.media_imagen .mover_cabecera {
	top: 0;
	bottom: 0;
	height: auto;
	border-radius: 6px;
}
.ideas_voladoras > .contenedor.autor_mensaje:hover > .mover_cabecera,
.ideas_voladoras > .contenedor.autor_mensaje:hover > .resize_derecha,
.curador .ideas_voladoras > .contenedor:hover > .mover_cabecera,
.curador .ideas_voladoras > .contenedor:hover > .resize_derecha {
	display: block;
}
/* Idea seleccionada (solo en edición): sus acciones —eliminar, fijar/soltar— están
   en la barra, así que tiene que verse cuál es. Gana al borde de hover. */
body.modo_edicion .contenedor.seleccionada,
body.modo_edicion .contenedor.seleccionada:hover {
	border: 2px dashed var(--resaltado);
}

/* Ancho de la media pegada: la franja derecha también aparece en las pegadas y en
   las hijas de bolsa, donde el ancho propio decide cómo se ve. Solo en media: el
   texto pegado fluye con el contenedor y no se redimensiona. */
.ideas_pegadas > .contenedor.media.autor_mensaje:hover > .resize_derecha,
.bolsa > .contenedor.media.autor_mensaje:hover > .resize_derecha,
.curador .ideas_pegadas > .contenedor.media:hover > .resize_derecha,
.curador .bolsa > .contenedor.media:hover > .resize_derecha {
	display: block;
}

.mover_cabecera:hover,
.resize_derecha:hover {
	background: rgba(128, 128, 128, 0.45);
}
/* En media (imagen/video) la franja de arrastre cubre todo el contenido; que NO
   se ponga gris/opaca al pasar el mouse (taparía la imagen o el video). Los
   controles (play/pausa/barra) siguen por encima. */
.contenedor.media .mover_cabecera,
.contenedor.media .mover_cabecera:hover {
	background: transparent;
}
/* En una voladora de media, el mover_cabecera cubre todo y ya la mueve, así que
   se oculta la franja fina `.mover` (duplicada). El subebaja NO se toca: sigue
   existiendo en las hijas (pegadas) para reordenar. */
.ideas_voladoras > .contenedor.media > .mover {
	display: none !important;
}

/* Contenido media de una idea (imagen/audio/video): escala con el ancho de la idea. */
.contenido_media {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}
audio.contenido_media {
	height: 34px;
	/* Sobre las franjas de arrastre (mover/mover_cabecera) para que el play y los
	   controles sean clicables aunque el handle cubra la idea. */
	position: relative;
	z-index: 8;
}

/* Estado de un video mientras se transcodifica a HLS (C.5). */
.media_estado {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: 12px;
	border-radius: 4px;
	font-size: 0.85em;
	text-align: center;
	background: rgba(128, 128, 128, 0.15);
	border: 1px dashed rgba(128, 128, 128, 0.4);
}
.media_procesando {
	animation: media_latido 1.4s ease-in-out infinite;
}
.media_error {
	color: #b00020;
	border-color: rgba(176, 0, 32, 0.4);
	background: rgba(176, 0, 32, 0.08);
}
@keyframes media_latido {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 1; }
}

/* ============================================
   Modo edición vs publicado (C.3)
   El toggle solo se muestra a quien puede editar (body.puede_editar). Cada
   modo enseña un icono distinto. En vista, las ideas con contenido dentro se
   marcan como pulsables (cursor pointer); el click simple entra a la idea.
   ============================================ */
.seccion_modo {
	display: none;
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 1001;
}
body.puede_editar .seccion_modo {
	display: block;
}
.toggleModo {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	line-height: 0;
	display: block;
}
/* Mismo comportamiento que los .botoncito: sin fondo/círculo al pasar, solo el
   leve desplazamiento. Anula la regla global button:hover. */
.toggleModo:hover {
	background: none;
	margin-left: 5px;
	transition: 0.3s;
}
.toggleModo .modo_edicion_icono,
.toggleModo .modo_vista_icono {
	display: none;
	width: 24px;
	height: 24px;
	vertical-align: middle;
}
body.modo_edicion .toggleModo .modo_edicion_icono {
	display: inline-block;
}
body.modo_vista .toggleModo .modo_vista_icono {
	display: inline-block;
}
body.modo_vista .contenedor.dropers {
	cursor: pointer;
}

/* En vista, las ideas navegables (con contenido dentro) muestran mano de link,
   también sobre el texto/imagen de adentro (que traen su propio cursor). */
body.modo_vista .contenedor.navegable,
body.modo_vista .contenedor.navegable .idea,
body.modo_vista .contenedor.navegable .idea * {
	cursor: pointer;
}

/* En vista, quitar el borde de hover heredado en las hijas (dentro de una bolsa)
   y en las navegables de primer nivel (que ya muestran su propio borde de
   navegación, para no duplicarlo). */
body.modo_vista .bolsa .contenedor:hover,
body.modo_vista .ideas_pegadas > .contenedor.navegable:hover,
body.modo_vista .ideas_voladoras > .contenedor.navegable:hover {
	border-color: transparent;
}

/* Marca a dónde se entra al pasar el mouse: en las ideas navegables de primer
   nivel (no en las hijas anidadas). En vista se entra con un click; en edición,
   con doble click. Aplica en ambos modos. */
.ideas_principal > .contenedor.navegable:hover,
.ideas_pegadas > .contenedor.navegable:hover,
.ideas_voladoras > .contenedor.navegable:hover,
.ideas_fondo > .contenedor.navegable:hover {
	outline: 3px solid var(--resaltado);
	outline-offset: 2px;
	border-radius: 6px;
	transition: outline-color 0.15s;
}


#ventanas .ui-draggable-dragging {
	border: 10px solid var(--resaltado) !important;
}

/* ============================================
   HERRAMIENTAS DE IDEA (ICONOS)
   ============================================ */

/* Contenedor de herramientas derecha */
.herramientas_idea_derecha {
	display: block;
	float: right;
	width: 20px;
	position: absolute;
	margin-right: -10px;
	margin-top: -14px;
	top: 0px;
	right: 0px;
}

/* Ocultar por defecto */
.contenedor > .herramientas_idea > .pin,
.contenedor > .subebaja,
.contenedor > .mover,
.contenedor > .rotar,
.contenedor > .herramientas_idea_derecha > .borrar,
.contenedor > .herramientas_idea_derecha > .mandaralfondo {
	display: none;
}

/* Mostrar en hover para curador */
.curador .ideas_pegadas .contenedor:hover > .herramientas_idea,
.curador .ideas_pegadas .contenedor:hover > .herramientas_idea_derecha .borrar,
.curador .ideas_pegadas .contenedor:hover > .mover,
.curador .ideas_pegadas .contenedor:hover > .subebaja,
.curador .ideas_voladoras .contenedor:hover > .herramientas_idea,
.curador .ideas_voladoras .contenedor:hover > .herramientas_idea_derecha .borrar,
.curador .ideas_voladoras .contenedor:hover > .mover,
.curador .ideas_voladoras .bolsa > .contenedor:hover > .subebaja,
.curador .ideas_voladoras > .contenedor:hover > .herramientas_idea > .pin,
.curador .ideas_fondo > .contenedor:hover > .herramientas_idea > .pin {
	display: block;
}

/* Mostrar mandaralfondo solo en voladoras y fondo para curador */
.curador .ideas_voladoras > .contenedor:hover > .herramientas_idea_derecha > .mandaralfondo,
.curador .ideas_fondo > .contenedor:hover > .herramientas_idea_derecha > .mandaralfondo {
	display: block;
}

/* Mostrar en hover para autor de cada idea individual */
.ideas_pegadas .contenedor.autor_mensaje:hover > .herramientas_idea,
.ideas_pegadas .contenedor.autor_mensaje:hover > .herramientas_idea_derecha .borrar,
.ideas_pegadas .contenedor.autor_mensaje:hover > .mover,
.ideas_pegadas .contenedor.autor_mensaje:hover > .subebaja,
.ideas_voladoras .contenedor.autor_mensaje:hover > .herramientas_idea,
.ideas_voladoras .contenedor.autor_mensaje:hover > .herramientas_idea_derecha .borrar,
.ideas_voladoras .contenedor.autor_mensaje:hover > .mover,
.ideas_voladoras .bolsa > .contenedor.autor_mensaje:hover > .subebaja,
.ideas_voladoras > .contenedor.autor_mensaje:hover > .herramientas_idea > .pin {
	display: block;
}

/* Mostrar mandaralfondo solo en voladoras y fondo para autor de la idea */
.ideas_voladoras > .contenedor.autor_mensaje:hover > .herramientas_idea_derecha > .mandaralfondo,
.ideas_fondo > .contenedor.autor_mensaje:hover > .herramientas_idea_derecha > .mandaralfondo {
	display: block;
}

/* No mostrar subebaja en voladoras ni fondo (tienen posición absoluta) */
/* Tampoco en bolsas dentro de voladoras (conflicto con draggable) */
.ideas_voladoras > .contenedor > .subebaja,
.ideas_fondo .contenedor > .subebaja {
	display: none !important;
}

/* En ideas de fondo: solo mostrar mandaralfondo, ocultar rotar y borrar */
.ideas_fondo > .contenedor .rotar,
.ideas_fondo > .contenedor > .herramientas_idea_derecha > .borrar {
	display: none !important;
}

/* Info visible en hover */
.contenedor:hover > .info {
	visibility: visible;
}

.contenedor > .info {
	visibility: hidden;
}

/* ============================================
   ICONOS DE HERRAMIENTAS
   ============================================ */

.pin {
	background-image: url("../images/limbo/pin.png");
	background-repeat: no-repeat;
	background-position-x: 8px;
	background-position-y: 2px;
	width: 20px;
	height: 15px;
	cursor: pointer;
	display: block;
	position: absolute;
	left: 16px;
}

.pin:hover {
	background-image: url("../images/limbo/pin.gif");
}

.ideas_fondo > .contenedor > .herramientas_idea > .pin {
	background-image: url("../images/limbo/pin_quieto.png");
}

.mover {
	background-color: transparent;
	width: 12px;
	height: 100%;
	position: absolute;
	top: 0;
	left: -2px;
	bottom: 0;
	cursor: grab;
	display: none;
	z-index: 10;
}

.mover:hover {
	background-color: rgba(128,128,128,0.45);
	border-radius: 4px 0 0 4px;
}

.ui-draggable-dragging .mover {
	cursor: grabbing;
}

.cerrar {
	background-image: url("../images/limbo/cerrar_quieto.gif");
	background-repeat: no-repeat;
	background-position-x: 0px;
	background-position-y: 0px;
	width: 16px;
	height: 16px;
	cursor: pointer;
	display: inline-block;
	margin-bottom: -2px;
}

.cerrar:hover {
	background-image: url("../images/limbo/cerrar.gif");
}

.borrar {
	background-image: url("../images/limbo/borrar_quieto.gif");
	background-repeat: no-repeat;
	background-position-x: 8px;
	background-position-y: 2px;
	width: 20px;
	height: 15px;
	cursor: pointer;
	display: inline-block;
	margin-bottom: -2px;
}

.borrar:hover {
	background-image: url("../images/limbo/borrar.gif");
}

.mandaralfondo {
	background-image: url("../images/limbo/pin_quieto.png");
	background-repeat: no-repeat;
	background-position-x: 8px;
	background-position-y: 2px;
	width: 20px;
	height: 15px;
	cursor: pointer;
	display: none;
	margin-bottom: -2px;
}

.mandaralfondo:hover {
	background-image: url("../images/limbo/pin.gif");
}

.subebaja {
	background-color: transparent;
	width: 100%;
	height: 12px;
	position: absolute;
	top: -2px;
	left: 0;
	right: 0;
	cursor: ns-resize;
	display: none;
	z-index: 10;
}

.subebaja:hover {
	background-color: rgba(128,128,128,0.45);
	border-radius: 4px 4px 0 0;
}

.rotar {
	width: 16px;
	height: 16px;
	position: absolute;
	right: -8px;
	bottom: -8px;
	cursor: ne-resize;
	display: none; /* Oculto por defecto */
	border-radius: 50%;
	background-color: transparent;
}

/* Mostrar rotar para curadores en hover */
.curador .ideas_pegadas .contenedor:hover > .rotar,
.curador .ideas_voladoras .contenedor:hover > .rotar,
.curador .bolsa .contenedor:hover > .rotar {
	display: block;
}

/* Mostrar rotar para autor de cada idea individual: pegadas, voladoras e hijas de
   bolsa. (No principal ni fondo, gestionados aparte.) */
.ideas_pegadas .contenedor.autor_mensaje:hover > .rotar,
.ideas_voladoras .contenedor.autor_mensaje:hover > .rotar,
.bolsa .contenedor.autor_mensaje:hover > .rotar {
	display: block;
}

/* NUNCA mostrar rotar en ideas_principal */
.ideas_principal .contenedor > .rotar {
	display: none !important;
}

.rotar:hover {
	background-image: url("../images/limbo/rotar.gif");
}

.agrandar {
	background-image: url("../images/limbo/tirar.png");
	width: 8px;
	height: 16px;
	position: absolute;
	right: -10px;
	top: 50%;
}

/* ============================================
   VER MAS (LINK A SUBIDEAS)
   ============================================ */

.ideas_principal .vermas, 
.bolsa .vermas {
	display: none;
}

.vermas {
	display: block;
	text-align: center;
	float: right;
	padding-left: 10px;
	margin-top: -12px; 
	margin-right: 20px; 
	margin-bottom: -14px;
	position: relative;
}

.vermas a {
	text-decoration: none;
	color: var(--resaltado);
}

.vermas a:hover { 
	text-decoration: underline;
	z-index: 100;
	position: relative;
}

.vermas a:after {
	content: url('../images/limbo/volver_quieto.gif');
}

.vermas a:hover:after {
	content: url('../images/limbo/volver.gif');
}

/* ============================================
   INFO DE IDEA
   ============================================ */

.info {
	background-image: url("../images/limbo/hoja2.gif");
	background-repeat: no-repeat;
	width: 18px;
	height: 20px;
	background-position-x: 6px;
	background-position-y: 2px;
	margin-right: -2px;
	margin-top: -2px;
	display: block;
	float: right;
	cursor: pointer;
	visibility: hidden;
}

.ideas_voladoras .contenedor .info {
	margin-right: -3px;
	margin-top: -8px;
}

.contenedor .info {
	background-image: url("../images/limbo/hoja.png");
}

.contenedor .info.nocollapsed {
	background-image: url("../images/limbo/hoja.png");
	visibility: visible;
}

.info:hover, 
.contenedor .info.collapsed:hover {
	background-image: url("../images/limbo/hoja2.gif");
}

.ideas_voladoras .info {
	margin-right: -10px;
	margin-top: -12px;
	background-position-x: 8px;
	background-position-y: 9px;
}

.info_idea {
	padding: 0px;
	margin-top: -2px;
	color: var(--resaltado);
	margin-left: 5px;
	margin-right: 5px;
	font-size: x-small;
}

.info_idea .fechahora {
	float: right;
	margin-top: -2px;
}

/* ============================================
   VENTANAS MODALES
   ============================================ */

.collapse {
	display: none;
}

#ventana_configurarColores, 
#ventana_configurarPrivacidad, 
#ventana_iniciarSesion, 
#mensaje_error {
	background-color: var(--mensajes);
	padding: 6px;
	width: 410px;
	color: var(--letra);
	border: 10px solid var(--linea);
	border-radius: 16px;
	position: absolute;
	left: 250px;
	top: 250px;
	font-size: large;
}

#ventana_configurarColores, 
#ventana_configurarPrivacidad, 
#ventana_iniciarSesion {
	z-index: 6000;
}

/* CORREGIDO: z-index alto para que siempre se vea */
#mensaje_error {
	z-index: 9000;
}

/* Handle superior para arrastrar las ventanas (como barra de título),
   transparente, con mano. La X (arriba a la derecha) cierra. */
#ventanas .herramientas_idea {
	position: static;
}
#ventanas .mover {
	display: block; /* la base .mover está en display:none (en ideas se muestra al hover); en las ventanas hay que mostrarla */
	position: absolute;
	top: 0;
	left: 0;
	right: 22px; /* deja espacio para la X */
	bottom: auto; /* anula el bottom:0 heredado (si no, el handle se estira a toda la ventana) */
	width: auto;
	height: 16px;
	cursor: grab;
	background: transparent; /* sin franja gris opaca; solo una pista al pasar el mouse */
	border-radius: 8px 8px 0 0;
	touch-action: none; /* necesario para el arrastre con interact.js en táctil */
	z-index: 3;
}
#ventanas .mover:hover {
	background: rgba(128, 128, 128, 0.18);
}
/* Al arrastrar, la ventana entera se pone un poco transparente. */
.arrastrando_ventana {
	opacity: 0.8;
}
#ventanas .mover:active {
	cursor: grabbing;
}
#ventana_configurarColores,
#ventana_configurarPrivacidad,
#ventana_iniciarSesion,
#mensaje_error {
	padding-top: 8px; /* espacio para el handle superior (16px, transparente) */
}

/* Configurar Colores */
#ventana_configurarColores .colores {
	width: 174px;
	display: inline-block;
	float: left;
}

#ventana_configurarColores .colores input[type=text] {
	width: 78px;
	font-family: Monospace;
	text-align: center;
}

#ventana_configurarColores .colores input[type=file] {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

#ventana_configurarColores .colores input[type=file]+label {
	width: 16px;
	font-size: 22px;
	line-height: 18px;
	display: inline-block;
}

#ventana_configurarColores .colores input[type=file]+label:hover {
	color: var(--resaltado);
	cursor: pointer;
}

#ventana_configurarColores .colores input[type=file]+label+a:hover {
	color: var(--resaltado);
}

#ventana_configurarColores .colores label {
	display: inline-block;
	width: 22px;
	margin-left: 8px;
}

#ventana_configurarColores .picker {
	margin-top: 10px;
}

/* Privacidad */
#ventana_configurarPrivacidad {
	font-size: x-small;
}

#ventana_configurarPrivacidad th {
	padding: 0px;
}

#ventana_configurarPrivacidad td {
	border-left: 2px solid var(--linea);
	border-top: 2px solid var(--linea);
	padding: 0px;
}

#ventana_configurarPrivacidad td input {
	width: 50px;
}

#privacidad {
	font-size: x-small;
}

/* Iniciar Sesión */
#ventana_iniciarSesion {
	position: absolute;
	width: 240px;
}

#ventana_iniciarSesion label {
	clear: left;
	float: left;
}

#ventana_iniciarSesion button {
	clear: left;
	font-size: xx-large;
	margin-left: 5px;
	margin-bottom: 5px;
}

#ventana_iniciarSesion input,
#ventana_iniciarSesion select {
	width: 110px;
	font-size: large;
	margin-bottom: 2px;
}

#ventana_iniciarSesion #crear, 
#ventana_iniciarSesion #cancelar_usuario {
	font-size: large;
}

/* Confirmación de borrado: ventana propia, centrada por CSS con `inset` + margin
   auto (no con transform, que es lo que usa el arrastre de interact.js). */
#ventana_confirmar {
	background-color: var(--mensajes);
	color: var(--letra);
	border: 10px solid var(--linea);
	border-radius: 16px;
	padding: 6px;
	padding-top: 8px; /* espacio para el handle superior */
	position: fixed;
	inset: 0;
	margin: auto;
	width: max-content;
	max-width: 320px;
	height: max-content;
	font-size: large;
	z-index: 9000;
}
.confirmar_texto {
	margin: 4px 6px 10px;
}
.confirmar_detalle {
	display: block;
	font-size: 0.8em;
	opacity: 0.75;
	margin-top: 4px;
	overflow-wrap: anywhere;
}
.confirmar_botones {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}
.boton_confirmar {
	background-color: var(--resaltado);
}

/* Mensaje de error */
.todomal {
	background-color: var(--resaltado) !important;
}

.todobien {
	/* Estilo para mensajes exitosos si se necesita */
}

/* Ventana archivo */
#ventana_archivo {
	margin-left: 15px;
	margin-top: -15px;
	position: absolute;
}

#ventana_archivo input[type=file] {
	width: 300px;
}

/* ============================================
   ICONOS DE SESIÓN
   ============================================ */

span[class^="icono_"] {
	width: 16px;
	height: 16px;
	display: inline-block;
}

span[class^="iconoGrande_"] {
	width: 24px;
	height: 24px;
	display: inline-block;
}

.icono_quien {
	background-image: url("../images/limbo/cara.gif");
}

.icono_clave {
	background-image: url("../images/limbo/llave.gif");
}

.icono_correo {
	background-image: url("../images/limbo/correo.gif");
}

.iconoGrande_entrar {
	background-image: url("../images/limbo/volver_quieto.gif");
}

.iconoGrande_entrar:hover {
	background-image: url("../images/limbo/volver.gif");
}

.iconoGrande_crear {
	background-image: url("../images/limbo/feto.gif");
	background-repeat: no-repeat;
	background-position-y: 5px;
}

.iconoGrande_crear:hover {
	background-image: url("../images/limbo/feto2.gif");
}

.iconoGrande_crear2 {
	background-image: url("../images/limbo/feto_grande.gif");
}

.iconoGrande_crear2:hover {
	background-image: url("../images/limbo/feto2_grande2.gif");
}

.iconoGrande_cancelar {
	background-image: url("../images/limbo/volver_quieto2.gif");
}

.iconoGrande_cancelar:hover {
	background-image: url("../images/limbo/volver2.gif");
}

.iconoGrande_guardar {
	background-image: url("../images/limbo/cara_grande.gif");
}

/* ============================================
   RESPONSIVE / MÓVILES
   ============================================ */

@media (pointer:coarse) {
	/* Mostrar info siempre en touch */
	.contenedor > .info { 
		visibility: visible;
	}
	
	/* Ventanas más anchas en móvil */
	#ventana_iniciarSesion, 
	#mensaje_error {
		width: 90%;
		left: 5%;
	}
	
	/* Herramientas siempre visibles en touch */
	.contenedor > .herramientas_idea,
	.contenedor > .mover,
	.contenedor > .subebaja,
	.contenedor > .herramientas_idea_derecha .borrar {
		display: block;
	}
	
	/* Mandaralfondo visible en voladoras/fondo en touch */
	.ideas_voladoras > .contenedor > .herramientas_idea_derecha .mandaralfondo,
	.ideas_fondo > .contenedor > .herramientas_idea_derecha .mandaralfondo {
		display: block;
	}
}